CSS选择器分类以及盒模型由内到外的结构

标签选择器

基本语法格式：标签名{ 属性1：属性值1；属性2：属性值2；}

所有的HTML标记名都可以作为标签选择器，例如a、body、p、h1等等。用标签选择器定义的样式对页面中该类型的所有标签都有效。

id选择器使用‘#’进行标识，后面紧跟id名。

基本语法格式：#id名{ 属性1：属性值1；属性2：属性值2；}

类选择器使用‘.’进行标识，后面紧跟类名。

基本语法格式：.类名{ 属性1：属性值1；属性2：属性值2；}

子选择器

子选择器是指定父元素所包含的子元素。子选择器使用尖角号（>）

相邻兄弟选择器

通过加号分隔符进行定位  前兄后弟 +后面的进行样式设置

兄弟选择器

通过波浪符号（~）分隔符进行定义

兄弟选择器能够选择前置元素后同级的所有匹配元素，而相邻选择器只能选择前置元素后相邻的一个匹配元素。

动态伪类

动态伪类是一类行为类样式，这些伪类并不存在于html中，只有当用户与页面进行交互时，才能体现出来

结构伪类

结构伪类是CSS3新设计的选择器，他利用文档结构树实现元素过滤，通过文档结构的相互关系来匹配特定的元素。

状态伪类

状态伪类主要针对表单进行设计，UI元素的状态一般包括：可用，不可用，选中，未选中，获取焦点，失去焦点，锁定，待机等

盒模型由内到外以次分为 内容（content） 填充（padding） 边框（border） 和边界（margin）

display:

inline 行内

block 块

inline-block 行内块

list-item 列表项

flexbox 弹性盒子

盒模型       呈现效果                      

block         变成块元素 独占一行

inline        行内元素

             上下margin无效

             上下paading导致布局混乱

inline-block  行内块元素

none           隐藏

white-space: nowrap  水平方向不换行  保证水平溢出

上下边距有时会重叠 两个边距谁大取谁

最后

以上就是俭朴水杯为你收集整理的CSS选择器分类以及盒模型由内到外的结构的全部内容，希望文章能够帮你解决CSS选择器分类以及盒模型由内到外的结构所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。