1. CSS的层叠性CSS(层叠样式表)之所以得名,是因为其样式规则可以层叠和覆盖。不同的规则可以应用于相同的元素,最终生效的样式是由以下几个因素决定的:
选择器的优先级:ID选择器优先于类选择器,类选择器优先于标签选择器。
源顺序:当选择器优先级相同,后定义的样式将覆盖前面定义的样式。
重要性:使用!important标记的样式会强制覆盖其他样式。
2. CSS布局的演变在CSS出现之前,网页布局主要依赖于HTML的表格(<table>)元素,这种方式不支持流式布局。CSS引入了块级和内联元素的概念,使得页面布局更加灵活:
块级元素:如<div>, <li>, 和<table>,每个块级元素独占一行。
内联元素:如<span>和<a>,可以在同一行内排列。
流式布局与自适应布局的区别在于流式布局允许元素根据其父元素的宽度自动调整,而自适应布局则是固定宽度的,通常在不同屏幕上表现较差。3. 长度单位CSS中长度单位的分类是布局设计的关键:
相对长度单位:
相对字体长度单位:如em, rem, ex, ch,这些单位相对于父元素或根元素的字体大小。
相对视区长度单位:如vh, vw, vmin, vmax,这些单位相对于视口的大小。
绝对长度单位:如px, pt, cm,这些单位是固定的,不会随其他元素的变化而变化。
4. 选择器类型选择器的使用决定了样式应用的对象,主要类型包括:
ID选择器:以#开头,如#header。
类选择器:以.开头,如.menu。
标签选择器:直接使用HTML标签名,如div。
属性选择器:根据属性值选择元素,如input[type="text"]。
伪类选择器:如:hover、:first-child等。
伪元素选择器:如::before、::after等。
5. 关系选择器关系选择器用于定义元素间的关系:
后代选择器:如div p,选择所有div内的p元素。
相邻后代选择器:如div > p,选择直接子元素。
兄弟选择器:如h1 ~ p,选择所有后续的p元素。
相邻兄弟选择器:如h1 + p,选择紧接在h1后面的p。
6. 盒子模型CSS中的盒子模型是理解元素布局的基础。每个元素都有两个主要的“盒子”:
外盒子(外部盒子):控制元素在页面上的显示方式(是否换行)。
内盒子(内容盒子):控制元素的实际宽度和高度。
不同的display属性会影响盒子的表现:
display: block:块级盒子。
display: inline-block:内联盒子与块级内容盒子结合。
display: inline:内联盒子。
display: table:表格布局。
7. 布局的尺寸控制
宽度(width)和高度(height):直接影响内容盒子的尺寸。
外部尺寸:由外部元素的宽度决定。
内部尺寸:由内部元素的内容决定。
在设计布局时,要避免使用固定宽度,以保持自适应特性,使布局更加灵活和适应不同的屏幕尺寸。8. CSS中的重要术语
属性:CSS属性如height和color。
值:如99px、50%等。
关键字:CSS中非常重要的单词,例如solid和inherit。
功能符:用函数形式指定的值,如rgba(0,0,0,0.5)、calc()等。
选择器的优先级:ID选择器优先于类选择器,类选择器优先于标签选择器。
源顺序:当选择器优先级相同,后定义的样式将覆盖前面定义的样式。
重要性:使用!important标记的样式会强制覆盖其他样式。
2. CSS布局的演变在CSS出现之前,网页布局主要依赖于HTML的表格(<table>)元素,这种方式不支持流式布局。CSS引入了块级和内联元素的概念,使得页面布局更加灵活:
块级元素:如<div>, <li>, 和<table>,每个块级元素独占一行。
内联元素:如<span>和<a>,可以在同一行内排列。
流式布局与自适应布局的区别在于流式布局允许元素根据其父元素的宽度自动调整,而自适应布局则是固定宽度的,通常在不同屏幕上表现较差。3. 长度单位CSS中长度单位的分类是布局设计的关键:
相对长度单位:
相对字体长度单位:如em, rem, ex, ch,这些单位相对于父元素或根元素的字体大小。
相对视区长度单位:如vh, vw, vmin, vmax,这些单位相对于视口的大小。
绝对长度单位:如px, pt, cm,这些单位是固定的,不会随其他元素的变化而变化。
4. 选择器类型选择器的使用决定了样式应用的对象,主要类型包括:
ID选择器:以#开头,如#header。
类选择器:以.开头,如.menu。
标签选择器:直接使用HTML标签名,如div。
属性选择器:根据属性值选择元素,如input[type="text"]。
伪类选择器:如:hover、:first-child等。
伪元素选择器:如::before、::after等。
5. 关系选择器关系选择器用于定义元素间的关系:
后代选择器:如div p,选择所有div内的p元素。
相邻后代选择器:如div > p,选择直接子元素。
兄弟选择器:如h1 ~ p,选择所有后续的p元素。
相邻兄弟选择器:如h1 + p,选择紧接在h1后面的p。
6. 盒子模型CSS中的盒子模型是理解元素布局的基础。每个元素都有两个主要的“盒子”:
外盒子(外部盒子):控制元素在页面上的显示方式(是否换行)。
内盒子(内容盒子):控制元素的实际宽度和高度。
不同的display属性会影响盒子的表现:
display: block:块级盒子。
display: inline-block:内联盒子与块级内容盒子结合。
display: inline:内联盒子。
display: table:表格布局。
7. 布局的尺寸控制
宽度(width)和高度(height):直接影响内容盒子的尺寸。
外部尺寸:由外部元素的宽度决定。
内部尺寸:由内部元素的内容决定。
在设计布局时,要避免使用固定宽度,以保持自适应特性,使布局更加灵活和适应不同的屏幕尺寸。8. CSS中的重要术语
属性:CSS属性如height和color。
值:如99px、50%等。
关键字:CSS中非常重要的单词,例如solid和inherit。
功能符:用函数形式指定的值,如rgba(0,0,0,0.5)、calc()等。