一 CSS概述
|
CSS：Cascading Style Sheet 级联样式表
样式: 元素的背景 大小 位置 边框 阴影...
1995年诞生，目前学习的是CSS3
HTML负责页面内容 CSS负责页面的样式
也就是说，我们用CSS修饰HTML的内容
|
二 CSS的编写位置
1. inline style 行内样式
|
<标签名 style=“color:red;”></标签名>
color指的是属性名 red指的是属性值
行内样式只能渲染当前元素，不能与其他元素共享
因为是单独渲染该标签，所以优先级非常高，但不利于修改，复用性很差
|
2. inner style 内部样式
|
在html文件的head标签中，添加style标签，在style标签中写CSS样式
<style> 选择器 { CSS样式代码 }
</style>
内部样式可以供当前页面中多个元素共享，但不能给其他页面的元素共享
|
3. outer style 外部样式
|
把样式声明在一个独立的.css文件中，需要此样式的HTML页面在自己的head标签中，添加link标签，引入该CSS样式即可
<link rel="stylesheet" href="01.css">
rel：表示引入的文件时什么类型 必写属性 stylesheet样式表
href：表示被引入的CSS文件的路径
|
4. 小结
|
CSS的基础语法
属性名:属性值;
属性名:值1 值2 值n...;
编写CSS的三种方式:
1. 行内样式inline style：给指定的某一个元素加样式
2. 内部样式inner style：写在style标签中，整个页面都生效
3. 外部样式outer style: 写在独立的CSS文件中，谁引入，谁生效
生效范围：
行内样式<内部样式<外部样式
样式优先级：
行内样式>(内部样式=外部样式)>浏览器的专有样式
|
三 CSS选择器
CSS选择器用在内部或外部样式中，告诉浏览器这些样式要渲染在哪些HTML元素上
选择器 {
CSS样式
}
1. 通用选择器（*）
|
*表示所有
* { color:red; }
表示当前页面上所有的标签都应用该样式
缺点：因为选中的是所有的元素，所以优先级非常低，性能低
|
2. 标签选择器（指定）
|
选中某类特定的HTML标签，选择器的名字就是标签名
div { color:pink; }
优点：快速为当前页面中同种类型的标签统一样式
缺点：选择太广泛，不能设计差异化样式
|
3. id选择器（#id）
|
选中页面上唯一一个元素，注意:id值与#之间不能有空格！
#d2 { color:blue; }
要先在标签中加id属性，再让CSS选中
优点:能够非常直观的找到该元素，优先级非常高
缺点：但是推荐少用，因为习惯上id值经常用于绑定JS代码，较少用于样式
|
4. 类选择器
|
选中某一类指定的元素，这个类名是可以自定义的
一个class属性的值，可以写多个，值与值之间使用空格隔开
注意:使用选择器时(.)与class值之间不能有空格！
.text-danger {background-color: red;} .text-success {background-color: green; } .msg {color: white; } <span class="text-danger msg">用户名不能为空</span> <span class="text-danger msg">密码不能为空</span> <span class="text-danger msg">两次密码输入不一致</span> <br> <span class="text-success msg">用户名可以使用</span> <span class="text-success msg">密码可以使用</span> <span class="text-success msg">两次密码输入一致</span>
|
5. 群组选择器
|
一次使用多个选择器选中多个元素，选择器间使用逗号分隔
h4,.r,#p { color: red; }
|
|
注意：群组选择器不限制选择器必须是同一类型的，可以在一个群组选择器中使用多种不同类型的选择器
|
6. 伪类选择器
"假的类"——注意伪类选择器的类名是固定的，不能自定义，表示选中某个时刻/状态
7. 并列选择器
|
选中可以同时被多个选择器选中的元素
注意：多个选择器之间不能有空格，必须紧挨着写！
/* 选中是div元素，并且class的值是danger */ div.danger {color:red;} /* 选中class值同时具有btn和succ的元素 */ .btn.succ{background-color: yellow;} |
8. 后代(包含)选择器
|
选中某个元素内的儿子、孙子、重孙子...元素
祖先选择器 后代选择器 { }
div span { } 选中div下的所有span
|
|
易错点:空格别忘记写！
使用场景: 内容结构比较简单，没有那么多相同标签
|
9. 直接子代选择器
|
选中元素下面的直接儿子元素
div>span { } 选中div下的所有儿子span
|
|
直接子代选择器也可以多层逐级向下选择需要的元素
|
10. 兄弟选择器
|
选中元素后面的所有兄弟元素——不要前面的兄弟，也不要子代
p~span { } 选中p后面的所有的span兄弟元素
|
11. 相邻兄弟选择器
|
选中元素后面紧挨着的相邻兄弟元素——不要前面的，也不要有间隔的，最多选中1个
p+span { } 选中p元素后面的紧挨着的那一个span兄弟元素
|
12. 属性选择器
|
[html 标签的属性名]{ } 选中包含指定属性名的元素
[html 标签的属性名="值"]{ } 选中包含指定属性名与属性值的元素
/* 选中包含属性名为readonly的元素 */ [readonly]{ border: 3px solid red;} /* 选中包含属性名为name且属性值为uname的元素 */ [name="uname"]{ background-color: green;} /* 选中是input元素，且属性名为readonly */ input[readonly]{ background-color: yellow;}
|
四 伪元素
|
伪元素就是我们给指定元素内部的前面/后面添加的内容，我们还可以对添加的内容进行样式设置
::before { content ：‘xx’} 表示在元素内部的最前面位置插入内容 ::after { content ：‘xx’ } 表示在元素内部的最后面位置插入内容
|
|
注意：content属性必须写，如果暂时没有具体内容，可以写成content:'';
|
五 CSS样式优先级
1. 相同选择器不同样式
|
当多个选择器选中了同一个元素，想要渲染不同的样式，会叠加效果
|
|
p { color: red; } .txt { background-color: yellow; }
|
2. 相同选择器相同样式
|
相同选择器选中同一个元素，而且要设置相同的属性，会采用顺序读取的原则，后面覆盖前面的
|
|
.txt {background-color: yellow;} .txt {background-color: green;}//呈现green
|
3. 继承现象
|
在CSS中，有一些属性是具有继承特性的，也就是父元素的CSS属性会传递给子元素
|
|
<p> <span>测试文字2</span>子元素span会继承父元素p的字体颜色 </p>
|
|
最近的祖先样式比其他祖先样式优先级高，就近原则
|
|
<div style="color: green;"> <div style="color: blue;"> <div>测试文字3</div> </div> </div>//blue
|
|
指定样式的优先级大于继承样式
|
|
<div style="color: pink;"> <span style="color: gold;">测试文字4</span> </div> //gold |
内部样式优先级， ！imporant强制提升
*{color：red！import}
4. 选择器不同权值的计算
|
选择器
|
权值
|
|
！important
|
10000
|
|
style="" 行内样式
|
1000
|
|
id选择器
|
0100
|
|
类 伪类 属性
|
0010
|
|
标签名 伪元素
|
0001
|
|
通用选择器* 子选择器> 相邻兄弟选择器+
|
0000
|
|
继承样式
|
无
|
原则：
权值大的优先渲染
!important > 行内样式 > ID选择器>（类选择器=伪类选择器）>标签名选择器>通用选择器>继承
权值会累加，但是不会越级！
比如11个类选择器，值不是10*11=110，而是99.9不会越级到下一级
选择器优先级诀窍:控制范围越大的，优先级越低
六 CSS中的颜色和尺寸
1. 颜色表示法
|
颜色
|
单词
|
RGB(24位色)
|
RGBA(32位色)透明
|
16进制
|
简写
|
|
红色
|
red
|
rgb(255,0,0)
|
rgba(255,0,0,1)
|
#FF0000
|
#f00
|
|
绿色
|
green
|
rgb(0,255,0)
|
rgba(0,255,0,1)
|
#00FF00
|
#0f0
|
|
蓝色
|
blue
|
rgb(0,0,255)
|
rgba(0,0,255,1)
|
#0000FF
|
#00f
|
|
青色
|
cyan
|
rgb(0,255,255)
|
rgba(0,255,255,1)
|
#00FFFF
|
#0ff
|
|
品红
|
magenta
|
rgb(255,0,255)
|
rgba(255,0,255,1)
|
#FF00FF
|
#f0f
|
|
黄色
|
yellow
|
rgb(255,255,0)
|
rgba(255,255,0,1)
|
#FFFF00
|
#ff0
|
|
白色
|
white
|
rgb(255,255,255)
|
rgba(255,255,255,1)
|
#FFFFFF
|
#fff
|
|
黑色
|
black
|
rgb(0,0,0)
|
rgba(0,0,0,1)
|
#000000
|
#000
|
|
中灰
|
gray
|
rgb(128,128,128)
|
rgba(128,128,128,1)
|
#808080
|
没有
|
注意:rgba(255,0,0,1)表示红色 1是完全不透明 0是完全透明 0.5半透明
2. 尺寸表示法
|
in英寸/cm厘米/mm毫米/pt镑 生活中的单位
|
|
px像素(Pixel) 屏幕中一个最小的发光点，网页种经常使用
|
|
% 百分比，指的是占父级元素的尺寸占比，参考的是父级元素的大小
|
|
em倍率/rem根倍率
1em指的是1倍当前字体的大小
1rem指的是1倍根元素(html)的字体大小
|
|
数字，没有任何单位，比如透明度
|
|
角度值 deg 0~360,也可以有负数，比如270deg= -90deg
|
|
时间单位 1s=1000ms 多数显示器是有刷新率的，一般是60Hz,一秒刷新60次
|
|
vw / vh APP开发时用到的视口宽度与视口高度
|
七 页面元素的显示模式
一个HTML元素可以有多种显示模式
|
块级元素——display:block;
常见标签：div h1~h6 p form table ul li...
排列方式：按照书写的顺序，从上往下依次排列
独占一行(一行指的是占父级元素宽度的100%)，还可以自设宽高
|
|
行内元素——display:inline;
常见标签：span a i b ....
排列方式：按照书写顺序从左往右依次排列，可以和其他内容同行，一行放不下才显示在下一行，无法设置宽度和高度，行内元素的大小是靠内容撑起来的
img元素是特殊的行内元素，它自己有宽高，还可以修改宽高
|
|
行内块元素——display:inline-block;
常见标签：input button
既有行内元素的特点，也有块级元素的特点：
可以与其他元素共处一行(行内)
可以设置宽度与高度(块级)
|
八 流与文档流
|
流(Stream)：车流 水流
多个对象有序排列称为流
|
|
文档流：
网页中多个元素按照自己的特性有序排列，形成了文档流
比如:块级元素是从上到下依次排列，行内与行内块元素从左到右依次排列，流式布局最稳定
文档流中元素的特点：
1） 依次紧密排列，中间没有大的空白，多个div/span在竖直/水平方向紧挨着
2） 流中的元素绝不可能出现一个元叠摞在另外一个元素上面的情况
如果项目中需要出现叠摞的效果，就只能"脱离文档流"(后面学)
|
九 CSS盒子模型
一个元素在水平方向上占用的总空间：中英文都要
一个元素在竖直方向上占用的总空间：中英文都要
1. 默认的盒子模型(内容盒子)
一个HTML元素，需要占用页面的空间，内容、边框、内容与边框之间的距离、不同元素之间的距离都需要占用页面空间，所以我们需要了解具体的计算方式。
|
content: 内容区域
padding：内间距—指的是内容与边框之间的距离
border: 边框
margin：外间距——指的是元素与元素之间的距离
|
|
涉及到四个方向:lef左 right右 top上 bottom下
|
|
一个元素在水平方向上占用的总空间：
左外间距+左边框+左内间距+元素宽度+右内距+右边框+右外间距
margin-left + border-left + padding-left + width + padding-right + boder-right + margin-right
|
|
一个元素在竖直方向上占用的总空间：
上外间距+上边框+上内间距+元素高度+下内间距+下边框+下外间距
margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom
|
2. 边框盒子模型(怪异盒子)
|
之前默认的盒子模型是内容盒子box-sizing:content-box;
内容盒子无论是增加内间距 边框都会增大元素在页面上占据的总空间
如果想增加间距且不增大元素占据的页面空间，推荐使用边框盒子：
box-sizing:border-box;
|
|
一个元素在水平方向上占用的总空间：
左外间距 + 宽度(内容+内间距+边框) + 右外间距
margin-left + width(content+padding+border) + margin-right
|
|
一个元素在垂直方向上占用的总空间：
上外间距 + 高度(内容+内间距+边框) + 下外间距
margin-top + height(content+padding+border) + margin-bottom
|
十 边框
1. 边框的不同写法
|
最常用的综合设置：粗细 线型 颜色
border：1px solid #000;
|
|
设置所有边框的单独一个属性：
border-width: 10px; /*边框的宽度*/
border-style: dotted;/*边框的线型*/ solid单实线 dotted点状 double双实线 dashed虚线
border-color: #0f0;/*边框的颜色*/
|
|
设置某一个方向的边框：
border-top: 1px solid #000; 设置上边框的粗细 线型 颜色
border-top-color:#0f0; 设置上边框的颜色
|
|
去掉边框：
border:none;
border:0;
|
2. 边框的巧妙用法
|
1. 需要一个没有内容，且宽高为0的div
2. 给此div设置一个大大的四条边都为透明色的边框
3. 给需要的那条边框设置颜色，作为要显示的三角形
|
|
.c1 { width: 0px; /* 宽度为0，不然是父级的宽度 */ border:20px solid transparent; /* 四条边有宽度，但是颜色都是透明色 */ border-top-color:#0f0; /* 只给需要的那条边框加颜色即可 */ } |
十一 内间距
元素内容与边框之间的距离，叫做内间距(padding)
1. 四个方向的内间距
|
上内间距：padding-top:10px;
右内间距：padding-right:10px;
下内间距：padding-bottom:10px;
左内间距：padding-left:10px;
注意：内间距的值不可以有负数，值越大距离越大
|
2. 内间距的简写形式
|
padding: 10px; 上右下左四个方向都是10*/
padding: 10px 20px; 上下:10 左右:20 */
padding: 10px 20px 30px; /* 上10 左右20 下30 */
padding: 10px 20px 30px 40px; /* 上10 右20 下30 左 40*/
永远都是上右下左
|
3. 行内元素的内间距
|
行内元素的左右内间距可以正常生效
但行内元素的上下内间距是无法渲染出来的，"视觉生效"，但实际布局效果没有出来，还会出现布局样式的堆叠，所以：行内元素尽量不要使用上下内间距
注意：行内元素img的四个方向的内间距均生效
行内块 input button这些元素的四个方向内间距均生效
|
4. 使用场景
|
让元素内部距离外层父元素的边有点距离，主要是为了美化，如:
让卡片中的文本不要贴边框显示
让输入框中的文字不要贴边显示
|
十二 外间距
元素边框外部与另外的元素之间的距离
外间距主要用于控制当前元素在四个方向上与其他元素的距离
外间距不属于元素本身的大小
1. 四个方向的外间距
|
上外间距：margin-top:10px;元素顶部与其他元素的距离
右外间距：margin-right:10px;元素的右侧与其他元素的距离
下外间距：margin-bottom:10px;元素的底部与其他元素的距离
左外间距：margin-left:10px;元素的左侧与其他元素的距离
|
2. 外间距的简写形式
|
margin: 10px; /*上右下左四个方向都是10*/
margin: 10px 20px; 上下:10 左右:20 */
margin: 10px 20px 30px; /* 上10 左右20 下30 */
margin: 10px 20px 30px 40px; /* 上10 右20 下30 左 40*/
永远都是上右下左
|
3. 外间距的视觉效果
|
外间距产生的空间不在元素内部，而是在元素的外部
对于行内元素，左右外间距生效，上下外间距不生效
对于img、行内块、块级元素的四个方向的margin均生效
|
4. 外间距的取值
|
正负值都可以用，正值是增加距离，0是紧挨着，负值减少距离
auto自动，只能在流式布局中让块级元素左右方向上的外间距自动计算成等值，出现水平居中的效果
注意:margin：0 auto; 还可以写成 margin: auto;
这个写法只能针对块级元素水平居中，对文字和行内元素不生效
|
5. 外间距的重叠【重难点】
|
在文档流的流式布局中：
1. 块级元素在竖直方向上的margin会出现合并的现象，取大值显示
2. 父元素的第一个与最后一个子元素都会和父元素有"重叠的边"，也就是说首/尾元素的上/下margin会超出父元素的范围
|
|
解决父子重叠的问题：
方案1：给父元素加边框 border: 2px solid #000;
方案2：给父元素加内间距 padding: 10px 0;
方案3：给父级设置格式化上下文BFC overflow: hidden;
|
十三 背景颜色和背景图片
1. 背景颜色
|
background-color：背景颜色会在元素的最底层
|
2. 背景图片的插入
|
background-image:url(图片路径); width:300px height:300px
注意：背景图和img标签图片的插入是有区别的!
1. img标签插入的图片在默认情况下直接就是图片本身的大小
2. background-image插入背景图的方式并不能直接显示图片，必须给当前元素设置宽高才行
|
3. 背景图的重复(平铺)repeat
|
1. 图片大小大于范围，图片会显示不全
2. 图片大小小于范围，默认图片会出现重复的情况，哪个方向上有剩余空间，就在哪个方向重复
|
|
属性和值:
background-repeat: no-repeat; /* 不许重复*/
background-repeat: repeat-x; /* 只在水平方向重复 */
background-repeat: repeat-y; /* 只在垂直方向重复 */
background-repeat: repeat; /* 默认值,允许重复 */
|
4. 背景图定位
|
background-position:left top; 默认值，先写左右，再写上下
X轴(水平方向)的值：left左 center中 right右
Y轴(竖直方向)的值: top上 center中 bottom下
center center 表示水平与竖直方向都居中，两个center可以简写成一个center
还可以写像素值，原点(0px 0px)就是左上角，正值向右/向下移动；负值向左/向上移动
|
5. 精灵图
|
CSS Sprite 直译为CSS精灵图，网页种处理图片的一种方式
UI会把多个小图标整合到一张图片中，可以利用背景图定位，选取到需要的小图标位置展示出来
优点：减少向服务器请求的次数，CSS更加优化
|
6. 背景渐变
|
1. 颜色设定(默认颜色从上向下排列)
background-image: linear-gradient(颜色1，颜色2，颜色n...);
2. 设置过渡的角度
background-image: linear-gradient(角度值(45deg)，颜色1，颜色2...);
3. 设置过渡颜色的范围
background-image: linear-gradient(角度值，颜色1 起始位置 结束位置 ，颜色2 起始位置 结束位置,...);
|
按钮文字居中
| 超链接去掉下划线：text-decoration：none |
| 文字对齐方式水平居中：text-align: center; |
| 文字的行高为块级高度，垂直居中：line-height |
7. 背景图的尺寸
background-image:url( )
background-size
|
background-size 没有设置任何尺寸时，默认使用图片本身的大小
background-size: 600px 300px; 取值可以是像素值
background-size: 100% 100%; 取值可以是百分比，宽高都是100%注意图片的失真问题
background-size: 100% auto; 宽度正好,高度自适应,会牺牲高度
background-size: auto 100%; 高度正好,宽度自适应,会牺牲宽度
background-size: contain; 至少显示一张完整的图,多余的空间平铺
background-size: cover; 铺满整个屏幕,多余的部分裁掉
注意：能使用比例合适的图尽量使用比例合适的图
|
8. 版心
|
在页面布局中，指定一个确定宽度的，用来显示主体内容的区域
注意:PC端页面一定要写版心，版心宽度是设计提供的
|
|
PC端布局：
常见的分辨率:960px 1024px 1200px
内容多，布局复杂，但所有页面一样，设置一个固定的绝对单位宽度，充当页面主要内容的显示区域
|
| 版心内容要纯粹 .center3 { /* 使用设计给的宽度 */ width: 900px; /* 版心水平居中 */ margin: 0 auto; |
十四 元素的隐藏与显示
|
方案1:修改颜色为透明色 .btn1:hover+box1{
background-color: transparent;
background-color: rgba(0,0,0,0); } |
|
方案2:修改显示模式
display: none;
none表示不显示,且释放布局空间
|
|
方案3:设置可见度为隐藏
visibility: hidden; 隐藏
visibility: visible; 默认值,显示
|
|
方案4: 修改元素的不透明度
opacity: 0.3; 元素的不透明度 0完全透明 1完全不透明
|
<head>
<meta charset="utf-8">
<title>元素的隐藏与显示</title>
<style>
div{
width: 200px;
height: 200px;
}
.box1{
background-color: red;
}
/* 方案1:修改颜色为透明色 （不显示）*/
/* 悬停在btn1上影响的是box1的颜色 */
.btn1:hover+.box1{
background-color: rgba(0,0,0,0);
}
.box2{
background-color: green;
}
/* 方案2:修改显示模式 ，且释放布局空间（消失）*/
.btn2:hover+.box2{
display: none;
}
.box3{
background-color: blue;
}
/* 方案3:设置可见度为隐藏 */
.btn3:hover+.box3{
/* visility：显示度 ，默认值，显示*/
visibility: hidden;
}
.box4{
background-color: pink;
}
/* 方案4: 修改元素的不透明度 */
.btn4:hover+.box4{
/* 元素的不透明度 0 完全透明 1 完全不透明 */
opacity: 0;
}
</style>
</head>
<body>
<button class="btn1">移入按钮让box1消失</button>
<div class="box1"></div>
<button class="btn2">移入按钮让box2消失</button>
<div class="box2"></div>
<button class="btn3">移入按钮让box3消失</button>
<div class="box3"></div>
<button class="btn4">移入按钮让box4消失</button>
<div class="box4"></div>
</body>
</html>十五 元素的溢出
|
当子元素超出了父元素的范围时，才会溢出
一般默认块级元素没有范围，子元素可以随意增加并撑大父元素
只有父元素限制范围，并且子元素内容又大于父元素的限制范围时，才会出现”溢出现象”
|
|
overflow: 同时控制水平与垂直方向的溢出情况
overflow-x:控制水平方向的溢出情况(子元素内容从父元素宽度中溢出)
overflow-y:控制垂直方向的溢出情况(子元素内容从父元素高度中溢出)
|
|
可取值：
visible 默认值 溢出可见
hidden 溢出隐藏
scroll 无论 是否需要，两边都显示拖拽条
auto 自动添加拖拽条，需要的时候再加
|
<style>
*{
margin: 0;
}
li{
height: 25px;
/* 取出列表项前标识符 */
list-style: none;
padding: 10px 0;
/* 添加虚线下边框 */
border-bottom: 1px dashed gray;
}
.box{
background-color: #eee;
width: 300px;
height: 300px;
/* overflow:visible;溢出 可见 */
/* overflow: hidden;溢出 隐藏 */
/* overflow: scroll;显示 拖拽条 */
overflow: auto;在需要的方向自动添加滚动条
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>>上海</li>
<li>>北京</li>
<li>>四川</li>
<li>>上海</li>
<li>>北京</li>
<li>>四川</li>
<li>>上海</li>
<li>>北京</li>
<li>>四川</li>
</ul>
</div>拓展
1. 幽灵空白节点
|
内联元素(行内+行内块)自带一个”幽灵空白节点”的文字节点
如果需要去掉幽灵空白节点，可以把该内联元素变为块级元素
|
<style>
*{
margin: 0;
}
li{
height: 25px;
/* 取出列表项前标识符 */
list-style: none;
padding: 10px 0;
/* 添加虚线下边框 */
border-bottom: 1px dashed gray;
}
.box{
background-color: #00f;
}
/* 将img变成block */
img{
display: block;
}
</style>
</head>
<body>
</div>
<!-- 内联元素(行内+行内块) -->
<div class="box">
<!-- 这是用来包裹所有img的父级,由它来带着所有的img移动 -->
<img src="file:///D:/web/project/1022/img/NSHM_PHOTO_2023_11_1_00_09_49.jpg" >
</div>
</body>2. 关于BFC
|
【面试题】
1. 你了解BFC吗 ？你知道块级格式化上下文吗?
2. overflow属性的哪三个值，会形成父元素的特殊性质?
|
|
BFC的全称是Block Formatting Context（块级格式化上下文）
简单来说，它是一个独立的渲染区域，这个区域与外部不相干了，相当于子元素在父元素内部折腾，但也不会超出父元素的范围
1. overflow属性的auto/scroll/hidden这三个属性值会让父元素形成BFC结界
2. BFC结界一旦形成，就能避免margin的父子贴边/粘连问题
3. BFC结界一旦形成，会重新计算父元素内部浮动的子元素的所占高度
|
三种显示模式的特点总结
1. 三种显示模式的特点总结
十六 元素浮动
1. 为什么使用浮动
|
布局中第一个困难就是块级元素的横向排列。
行内元素虽然是横向排列，但设置宽高无效，且不能包裹更多标签
行内块元素虽然也是横向排列，但不建议做布局，因为行内块自带了很多不好去除的样式
所以，我们要使用浮动，可以让元素横向排列，方便排版
|
2. float属性
|
float单词的意思是浮动，它最初的作用是为了制作”文本环绕”效果
float:right；右浮动，是向父级元素的右侧边界靠拢
float:left；左浮动，是向父级元素的左侧边界靠拢
|
3. 元素浮动后产生的结果
|
1. 一个父元素中的子元素浮动了，那么这个子元素就不再支撑父元素的高度
2. 浮动会破坏原有的文档流布局，变成浮动布局，元素可以横向排列
3. 如果一个父元素中所有的子元素都浮动了，父元素会高度坍塌
4. 浮动会让元素”块状化”【行内 行内块会变成块级】
5. 子元素浮动后，外间距的重叠现象消失【兄弟间的上下重叠，父子间的上下边重叠】
|
十七 解决高度坍塌
|
当父元素中所有的子元素都浮动走，也就是所有的子元素都脱离文档流，释放布局空间后
就不再支持父级元素了，父级元素就会高度坍塌--失高
|
1. 父级元素自定义高度
|
父元素可以通过参照子元素的高度给自己自设高度解决问题
|
|
应用场景：
已知子元素的高度，并且子元素高度相同时，适合此方案，比如:导航条
注意:当子元素高度未知时，无法自定义父级高度
|
2. BFC保护
|
任何设置了BFC的元素，和浮动的元素相遇时，都可以实现”自动填充”的适应布局。
也就是说，当父元素设置了BFC结界后，子元素浮动，父元素高度会自动填充(自动适配)
|
|
应用场景:
子元素未知高度，且子元素不会超出父级范围
触发BFC的代码:overflow:hidden/scroll/auto;
|
3. 父级元素成为同层元素
|
父级想要和子元素成为同一层元素，相当于父元素也要脱离文档流
父元素脱离文档流，可能会继续影响父元素的上级元素，导致上级元素仍然需要解决高度坍塌的问题
|
4. clear属性清除浮动影响
|
clear属性专门用于解决float带来的高度坍塌问题
1. 清除指的是清除前面”哥哥们”浮动对父元素产生的不支撑效果
2. clear会让前面的浮动元素与当前元素换行显示，对后面的浮动元素无法起到作用
3. 使用clear的元素，自己不可以浮动，要保持在文档流中替前面的浮动元素清除影响
4. clear属性只对块级元素生效
|
|
使用方法:在父元素最后，添加一个牺牲自我(宽高都是0)的子元素，清除浮动影响
这样的方式会造成后台遍历数据时多一个孩子
|
5. 使用：：after伪元素
|
给父元素最后生成一个空白的”假孩子”，变块级，清影响
.clearfix::after { content:''; /* 内容是空白的 */ display: block; /* 变成块级才能用clear属性 */ clear: both; /* 用于清除前面所有哥哥们浮动造成的失高影响 */ }
|
|
我们使用::after模拟出一个假孩子，这个子元素在父元素的最后，方便只用它来清除高度坍塌影响
|
十八 元素的美化与修饰
1. 列表
|
1. 浏览器为列表提供了内外间距，记得提前样式重置
ul,ol { margin:0;padding:0;}
2. 去掉列表项标识符
list-style:none;
|
2. 表单控件的外轮廓线
|
外轮廓线在不同的浏览器展示的效果不同，当元素获得焦点时，外轮廓线就会被激活显示
一般情况下，我们习惯在样式重置时去掉或者改写样式。
outline:none;
|
3. 常用光标(cursor)样式
|
default 默认值，箭头
pointer 小手
wait 等待(沙漏或转圈)
crosshair 十字光标(截图、取色)
text 文本输入符(工字型)
move 移动或拖拽的图标
|
4. 边框圆角的问题
|
圆角分别代表元素四个角的弧度半径，取值可以是长度单位，也可以是百分比
border-radius：边框圆切角半径
radius表示半径r,用圆来切角，可以把直角变为圆角
|
|
写法1：使用像素值
border-radius:5px; 四个角的弧度统一
border-radius: 10px 30px; 左上右下 右上左下 对角线
border-radius: 10px 20px 30px;左上 右上左下 右下
border-radius: 10px 20px 30px 40px; 从左上角开始顺时针赋值
写法2:使用百分比
border-radius:50%;
写法3：给不同的角分别设置角度
border-top-left-radius:5px; 单独给左上角设置角度
left/right/top/bottom关键字拼写即可
|
|
特殊形状
圆形：需要元素的宽度、高度一致，border-radius:50%;
椭圆形：不需要元素宽高一致，border-radius:50%;
胶囊形：border-radius:高度的一半；
|
5. 盒子阴影
|
box-shadow 元素的阴影效果
值1: 必写，阴影在x轴偏移量，单位px,可以写负值，反方向移动
值2: 必写，阴影在y轴偏移量，单位px,可以写负值，反方向移动
值3: 羽化值，默认值为0，羽化值越大虚化程度越高，不允许负值
值4: 阴影扩展半径，默认值0，数字越大，阴影范围越大，可以为负值(用的较少)
值5: 阴影的颜色，使用色值
值6：内、外阴影，内阴影inset,默认值outset外阴影
|
十九 文本处理
1. 字号(字体大小)
|
font-size:14px; 绝对尺寸，在任何终端尺寸都一样
font-size:1.5em；设置成父级字体大小的1.5倍
font-size:2rem; 设置成页面根元素html字体大小的2倍
注意：
1. 文字大小是可以被继承的
2. 谷歌浏览器默认的字体大小是16px，最小显示的字号是12px，低于12px，也以12px显示
3. 一般门户常用的字体大小是12px 14px 16px
|
2. 字体颜色
|
color 文字的颜色，该属性可以被继承，值可以使用任何色值
|
3. 字体型号(家族)font-family
|
font-family 字体系列允许通过指定多个字体名称来设置字体型号
注意：
1. 执行顺序是从前向后执行
2. 字体名称需要用引号包裹
3. 一般情况，设置字体型号要放到HTML标签上
4. 注意商用字体要考虑版权问题，尽量少用奇怪的字体，因为客户端可能会没有
|
4. 字体字重font-weight
|
font-weight 字体字重也就是字体的粗细，浏览器不同，展示的效果也会不同
取值：
normal; 默认值，正常体
lighter; 细体
bold; 粗体
还可以使用数值的方式，100的倍数 100~900
400 正常体 300细体 600粗体
|
5. 文本的水平对齐方式
|
text-align定义行内内容(文本/内联元素)，相对于块级父元素对齐
注意！！！本属性并不是写给要对齐的元素，而是要写给它的块级父元素
text-align:center; 居中对齐
text-align:left; 左对齐
text-align-right; 右对齐
注意:本属性对行内元素无效，如果行内块元素宽度与内容等宽也无效
这里的居中指的是让块级或行内块元素中的文本、图片等内容居中
|
6. 行高
|
line-height 行高也称作行间距，指的是文本之间的距离
行高，值可以设置为像素值，也可以设置为数字，没有单位，表示倍数
如果需要单行文字在元素内垂直居中，可以使用line-height设置为元素的高度即可 cg：line-height：120px
|
7. 文本的修饰线(CSS)
|
text-decoration: underline; 下划线
text-decoration: none; 去掉修饰线，不止是下划线
text-decoration: line-through; 给元素添加一条删除线
|
8. 首行缩进
|
text-indent:2em;
一般用于中文段落的首行，首行需要缩进两个中文字符
|
9. 文本溢出效果
|
我们可以通过限制父级的宽度，并且强制文本内容不换行来实现文本的溢出效果
我们还可以把溢出的文本部分替换成省略号:
white-space:nowrap; 强制不换行
overflow:hidden; 溢出部分隐藏
text-overflow:ellipsis; 超出的文本替换成省略号
|
水平居中
| .box .p2 { background-color: green; /*让块级p 中的文本内容居中 */text-align; center; |
| .box .p1 { width: 150px;background-color: green; /*控制文字的水平对产方式 */ text-align: center; text-align: right; /*让块级p整体居中 */ margin: 0 auto; |
10. 垂直对齐方式
vertical-align针对的是内联元素左右的文本和内联元素自己的垂直对齐方式，块级无效
取值：
baseline 基线对齐，默认值
top 顶线对齐
bottom 底部对齐
middle 居中对齐
拓展
三种显示模式的特点总结
|
特点
|
块级元素
|
行内元素
|
行内块元素
|
|
代码
|
display:block;
|
display:inline;
|
display:inline-block;
|
|
宽度与高度
|
宽度默认为父级的100%
高度靠内容撑开否则为0
设置宽高有效
|
宽高是被内容撑开的
设置宽高无效
|
受默认样式与内容影响
设置宽高有效
|
|
排列方式
|
从上到下排列
|
从左到右排列
|
从左到右排列
|
|
四个方向的内外间距
|
四个方向全生效
|
左右方向生效
上下方向不生效
|
四个方向全生效
|
|
幽灵空白节点
|
无幽灵节点
|
有幽灵节点
|
有幽灵节点
|
|
注意1: 内联元素包含行内元素与行内块元素
注意2: img是特殊的行内元素，可以设置宽高且四个方向的内外间距均生效
注意3：我们可以修改HTML元素的display属性，切换显示模式
| |||
二十 元素的定位
1. 定位的相关属性
|
定位position的五种值：
静态定位(默认值)、相对定位、绝对定位、固定定位、粘性定位
静态定位:position:static; 默认值，就是我们之前学习的文档流布局
在文档流布局中的元素，只能依次排列，不能随意改变自己的位置
如果想要灵活调整元素位置，常用的就是上面的3种定位方式
|
|
在定位时，一定需要让元素移动，涉及到了四个移动属性：
top：正值向下移动，负值相反
bottom: 正值向上移动，负值相反
left: 正值向右移动，负值相反
right: 正值向左移动，负值相反
注意：这里的值可以写像素值，也可以写百分比
注意：一定要先写定位属性，才能使用以上四个值使元素移动
|
|
层级:z-index:
设置一个定位属性，当元素之间发生重叠时，z-index值大的元素会覆盖值小的元素
1. z-index的值越大，层级越高
2. 值为整数值，没有任何单位 cg z-index:
3. 默认值为auto,可以看作是层级0，z-index还可以取负值
|
2. 相对定位
|
position:relative;//必须加
移动参照物:相对于元素自己原来的位置重新定位
可以使用top/bottom/left/right移动元素
使用相对定位可能会产生元素的堆叠，不会提升元素的层级，想要改变层级就需要用到z-index属性
1. 相对定位没有脱离文档流，所以还可以保留原有位置，支撑父元素，不会影响父级
2. 与外间距的区别:
外间距移动会影响其他元素的位置，但相对定位不会挤开兄弟元素，而是会发生堆叠
|
3. 绝对定位absolute【重点】-子绝父相
|
position:absolute;
1. 可以使用top/bottom/left/right改变元素的位置
2. 移动参照物:离自己最近的具有非静态定位属性的祖先元素，一路向上找，终点是html根元素
3. 绝对定位会脱离文档流，释放布局空间
4. 如果造成了堆叠，可以使用z-index调整层级
5. 小技巧:如果想要使用绝对定位，可以给父元素设置定位属性，父元素的定位属性建议使用不 会脱离文档流的相对定位属性position:relative;
6. 注意:理想状态”子绝父相”，但注意，如果父级已经有定位属性了，就不用专门再设置了
|
4. 固定定位-参照数为整个html（遮罩层）
|
position:fixed;
1. 可以使用top/bottom/left/right改变元素的位置
2. 固定定位的元素也会脱离文档流
3. 会造成与其他元素的堆叠，需要的时候可以用z-index调整层叠顺序
4. 固定定位的参照物是html根元素(浏览器窗口)
|
|
撑满全屏的写法:
/*遮罩层*/ .mask { background-color:rgba(0,0,0,.5); /*使用固定定位来撑满全屏*/ position:fixed; top:0; bottom:0; left:0; right:0; }
|
|
水平垂直居中的方法(元素在正中间)
思路总结：
1. 子元素明确宽高，且使用绝对定位
2. 子元素四个方向的数值相同(都是0)
3. 子元素加margin:auto;
.mask .login { width: 400px; height: 250px; position: absolute; top: 0;bottom: 0;left: 0;right: 0; margin: auto; }
|
<html>
<head>
<meta charset="utf-8">
<title>固定定位</title>
<style>
/* 遮罩层 */
.mask {
background-color:gray;
/* 使用固定定位 */
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
/* 登录窗口 */
.mask .login{
width:400px ;
height: 250px;
background-color: white;
padding: 20px;
/* 当一个明确宽高的子元素使用绝对定位,且四个方向都为0就可以结合margin:auto实现在父元素里的水平垂直居中 */
/* 居中 */
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
/* 登录窗口中输入框的样式 */
.mask .login input{
width: 100%;
height: 20px;
margin-bottom: 20px;
}
.mask .login button{
width: 80px;
height: 30px;
}
</style>
</head>
<body>
<div class="text">
假装背后有一大段文字Lorem*70
</div>
<!-- 遮罩层-->
<div class="mask">
<div class="login">
<h3>学子商城登录</h3>
<hr>
<input type="text" placeholder="请输入用户名">
<input type="text" placeholder="请输入密码">
<button>登录</button>
</div>
</div>
</body>
</html>
下拉导航条
<title>汉唐首页导航</title>
<style>
*{
margin: 0;
padding: 0;
}
.center{
width: 1000px;
margin: 0 auto;
}
nav{
background-color: #f5f2eb;
height: 40px;
}
.nav-item{
width: 90px;
height: 40px;
/* 浮动 */
float: left;
}
a{
display: block;
color: #666;
font-size: 14px;
/* 去掉下划线 */
text-decoration: none;
text-align: center;
line-height: 40px;
}
/* 悬停或激活样式都使用此样式 */
/* 群组选择器 */
.nav-item a:hover,.nav-item>.active{
color: #fff;
background-image: linear-gradient(#d4011a,#970009);
}
/* ****下拉菜单效果***** */
.nav-item ul{
list-style: none;
background-color: rgba(0,0,0,.4);
color: #fff;
font-size: 14px;
/* 列表项默认消失，悬停显示 */
display: none;
/* 固定定位的参照物是html */
position: fixed;
top:40px;
}
.nav-item ul li{
width: 90px;
line-height: 40px;
text-align: center;
/* 横向排列用float */
float:left;
}
.nav-item:hover ul{
/* 悬停 */
display: block;
}
</style>
</head>
<body>
<!-- 最外层导航功能块 -->
<nav>
<!-- 2.版心 -->
<div class="center">
<!-- 3.每一个导航项 -->
<div class="nav-item">
<!-- href="javascript:;" 表示一个空链接 -->
<a href="javascript:;" class="active">首页</a>
</div>
<div class="nav-item">
<a href="javascript:;">关于汉唐</a>
<ul>
<li>公司简介</li>
<li>董事长致辞</li>
<li>公司大事件</li>
<li>旗下公司</li>
</ul>
</div>
<div class="nav-item">
<a href="javascript:;">关于汉唐</a>
<ul>
<li>公司简介</li>
<li>董事长致辞</li>
<li>公司大事件</li>
<li>旗下公司</li>
</ul>
</div>
<div class="nav-item">
<a href="javascript:;">关于汉唐</a>
<ul>
<li>公司简介</li>
<li>董事长致辞</li>
<li>公司大事件</li>
</ul>
</div>
<div class="nav-item">
<a href="javascript:;">关于汉唐</a>
<ul>
<li>公司简介</li>
<li>董事长致辞</li>
<li>公司大事件</li>
</ul>
</div>
</nav>
</body>
</html>
二一 浮动与定位总结
|
浮动(float:left/right)
1) 浮动会脱离文档流，释放布局空间，可能会出现堆叠的现象
2) 如果所有子元素都浮动，父元素高度坍塌——5种解决方案
3) 浮动元素可以使用margin微调自己的位置
4) 用途: 在页面中实现”左右分居”效果
|
|
静态定位(position:static)/默认的文档流布局
1） 块级元素按照书写顺序从上往下依次排列
2） 行内/行内块元素按照书写顺序从左到右依次排列，一行放不下才换行
3） 文档流中的元素都是紧密排布的，没有大的空隙，且没有堆叠现象
|
|
相对定位(position:relative)
1) 不会脱离文档流，不会释放布局空间
2) 定位参照物:自己作为静态定位元素时的位置
3) 可以使用top/bottom/left/right修改自己的位置
4) 可能会出现堆叠现象，可以使用z-index调整层级
5) 用途1：微调自己的位置，而不影响周围的元素
6) 用途2：为使用绝对定位的后代元素提供定位参照物
|
|
绝对定位(position:absolute)
1) 会脱离文档流，释放布局空间
2) 定位参照物：离自己最近的具有非静态定位属性的祖先元素，会逐级向上找，终点是html
所以我们可以使用”自绝父相”，但若父级有非静态定位属性，就不用专门加了
3) 可以使用top/bottom/left/right修改自己的位置
4) 可能会出现堆叠现象，可以使用z-index调整层级
5) 用途: 在页面上覆盖到其他元素上方的指定位置
|
|
固定定位(position:fixed)
1） 会脱离文档流，释放布局空间
2） 定位参照物: html根元素
3） 可以使用top/bottom/left/right修改自己的位置
4） 可能会出现堆叠现象，可以使用z-index调整层级
5） 用途：制作覆盖整个窗口的遮罩层
|
1355
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
