CSS3重学笔记
大约 46 分钟
css3重学笔记
更新日志
- 2022-06-05: 因为感觉原先学CSS的时候没有学透彻，一直想重新系统性的学一遍，查缺补漏。最近几天有时间就开始学了，顺便记个笔记，加深印象、方便复习和查阅。
- 2022.06.11：终于把基础部分的知识点归纳总结完了，崩溃了，为什么这么多......
- 2022.06.12: 【增添】
background-size、text-shadow、box-shadowtransition属性笔记
目录
- css3重学笔记
css简介
- CSS: Cascading Style sheets 层叠样式表
- 注释格式:
/* css的唯一注释格式 */ - 语法格式:
选择器{属性:属性值;}
引入方式
内嵌式
写在style标签中
虽然style标签可以写在任意位置，但一般约定style标签写在head标签中的title标签下
<head> <title>Document</title> <style> p{ color: red; background-color: green; font-size: 30px; width: 500px; height: 500px; } </style> <link rel="stylesheet" href="path/to/file.css"> </head>使用场景：小案例
作用范围：当前页面
外联式
写在一个单独的.css文件中
需要用link标签引入
<!-- rel=>relation关系 stylesheet指定是css--> <!-- href=>路径 --> <link rel="stylesheet" href="path/to/file.css">使用场景：大项目
作用范围：多个页面
行内式
直接写到标签的style属性中
<p style="color: white;">qqq</p>使用场景：一般配合js使用
作用范围：仅单个标签
选择器
标签选择器
- 语法：
标签名{css属性名:属性值;} - 特点：匹配到所有标签，无论嵌套关系多深
类选择器
- 语法：
.类名值{css属性名:属性值;} - 特点：只作用于标签属性中
class="指定类名"的所有标签 - 注意：
- 所有标签都可以有class属性
- 类名只能以数字字母下划线中划线组成且不能以数字或中划线开头。
- 一个标签可有有多个类名
<div class="c1 c2"></div> - 一个类选择器也可以选中多个类
.类名1 .类名2{css属性名:属性值;}
id选择器
- 语法：
#id属性值{css属性名:属性值;} - 特点：只唯一作用于id属性为指定值的标签
- 注意：
- 所有HTML标签都可以有id属性
- id属性值只能以数字字母下划线中划线组成且不能以数字或中划线开头。
- 按规定id属性值在单个页面中是唯一的
- 一个标签只能有一个id属性值
- 一个id选择器只能选中一个标签
- id选择器一般配合js使用
通配符选择器
- 语法：
*{css属性名:属性值;} - 特点：作用于所有标签
- 用法：清除标签的默认样式
margin外边距 如h1标签就有默认外边距
padding内边距
*{ margin:0; padding:0; }
后代选择器
- 语法:
选择器1 选择器2{css属性名:属性值;} - 特点：选择器之间用空格隔开
- 注意：
- 后代包括 子代 孙代 重孙代
- 单个选择器可以是上面四种基本选择器
- 可以跨代选择
子代选择器
- 语法：
选择器1>选择器2{css属性名:属性值;} - 特点：选择器之间用 > 隔开
- 注意：
- 子代选择器只能选择子代 不能选择孙代
并集选择器
- 语法：
选择器1,选择器2{css属性名:属性值;} - 特点：选择器之间用逗号隔开
- 注意：
- 并集选择器中的单个选择器可以是上面两种复合选择器
- 单个选择器可以一行写一个提高代码可读性
交集选择器
- 语法
选择器1选择器2{} - 特点：交集选择器选择的是满足要求的一类标签 交集可能是空 可能有一个 可能有多个
- 4种基本选择器两两排列组合的示例：
- 标签和类名的交集：
p.class1{} - 标签和id的交集
p#id1{} - 标签和通配符的交集：
p*{}*p{}- 似乎没有什么应用场景 *和p的交集就是p
- 类名和id的交集：
.class1#id1{}#id1.class1{} - 类和通配符的交集：
.class1*{}*.class1{}- 似乎没有什么应用场景 *和class1的交集就是class1
- id和通配符的交集：
#id1*{}*#id1{}- 同上；*和#id1的交集就是#id1
- 标签和类名的交集：
- 注意：
- 交集选择器能且只能交两个基本选择器
- 交集选择器的两个选择器一定是对两个不同HTML的标签选择器做交集 所以不要问h1和p的交集怎么写 不要问
h1p{}这种写法浏览器能不能识别（你说你没问？好吧我问的...），这两个标签不可能有交集 但是类和类可以有交集.class1.class2{}这种写法浏览器能识别#id1#id2{}这种写法浏览器也能识别 - 因为统配符选择器和任何选择器的交集都是这个选择器本身，所以实际中应该用不到
伪类选择器
- hover
- 语法：
选择器:hover{} - 作用：设置鼠标悬停在标签上时显示的样式
- 注意：任何标签都有伪类hover
- 语法：
结构伪类选择器
- 作用：根据HTML的元素结构关系查找元素
- 优势：减少对HTML中类的依赖，利于代码整洁
- 场景：常用于查找某父级选择器中的子元素
- 语法：
选择器:first-child{}第一个元素选择器:last-child{}最后一个元素选择器:nth-child(n){}第n个的元素选择器:nth-last-child(n){}最后第n个元素- n的取值
- 数字：0、1、2、3.... (0会选不中任何元素)
- 公式：
- 偶数
2neven - 奇数
2n+12n-1odd - 前3个
3-n- （n取0时得3 取1时得2 取2时得1 取3时的0 取4时得-1 以此类推 感觉可理解为是在一个for循环中n从0开始取值，公式就是元素下标要填写的内容）
- 后3个
3+n
- 偶数
- 注意：
- 对于左浮动，要用last-child选中最后(右)一个元素
- 对于右浮动，要用first-child选中最后(左)一个元素
<style>
li:first-child{
background-color: gold;
}
li:nth-child(2){
background-color: darkgrey;
}
.li-example:nth-child(3){
background-color: chocolate;
}
</style>
<ul>
<li class="li-example">这是第1个li</li>
<li class="li-example">这是第2个li</li>
<li class="li-example">这是第3个li</li>
<li class="li-example">这是第4个li</li>
<li class="li-example">这是第5个li</li>
</ul>
效果：
伪html元素选择器
- 伪元素是
CSS3模拟出的HTML标签效果 - 伪元素的
CSS样式必须要有content属性,属性值可以为空(content:"";) - 伪元素默认是行内元素(inline-block)
- 语法：
选择器::before{}在选中元素的内容的最开头添加的伪元素选择器::after{}在选中元素的内容的最后添加的伪元素
字体样式
字体的大小属性
- 属性名：
font-size - 取值：
数字+px - 注意：
- 谷歌浏览器默认文字大小16px
- 必须加单位否则没有效果
字体的粗细属性
- 属性名：
font-weight - 取值：
- 取关键字：
normal正常不加粗（默认）bold加粗
- 取数字：
- 取
100~900的整百数 共九种取值 400效果对应normal700效果对应bold
- 取
- 注意：
- 并不是所有
字体都有九种粗细 - 实际开发中主要用
正常和加粗两种取值
- 并不是所有
- 取关键字：
字体的倾斜属性
- 属性名：font-style
- 取值：
- normal 正常不倾斜（默认）
- italic 倾斜
- italic作形容词时译为“斜体的；仿意大利古书写体的”，作名词时译为“斜体字”
- 所以可以用该属性把斜体标签变不倾斜
<em style="font-style:normal">ggg</em>
字体的family字体属性
属性名：
font-family取值格式：
font-family:字体名1,字体名2,字体名3,字体系列名;取值：
微软雅黑windows默认苹方macOS默认- 等...
扩展：网页中一般采用无衬线字体(sans-serif)
示例：
div{ /* 按优先级选择可用的字体，如果没有两种字体都没有则使用任意一种无衬线字体(sans-serif) */ font-family:微软雅黑,黑体,sans-serif; }
字体的复合属性
- 属性名：
font - 取值格式：font:style weight size family;
- 示例：
font: italic bold 16px 微软雅黑;
- 示例：
- 这个属性只能省略前两个值，省略表示设置为默认值
- 这种一个属性后有多个值的称为复合属性
文本样式
文本缩进属性
- 属性名
text-indent - 取值：
数字+px数字+em(推荐)1em=当前标签的font-size大小
文本水平对齐方式属性
- 属性名
text-align - 取值
leftcenterright
- 注意
- 可以作用于该标签的内容 不光是作用于文字
- 要让
img这种单标签居中 需要设置其父元素的text-indent属性
文本修饰线属性
- 属性名：
text-decoration - 取值：
underline下划线line-through删除线overline上划线none无装饰线
- 注意：
- 开发中会用
text-decoration:none清除超链接的下划线
- 开发中会用
文本行高属性
- 属性名：
line-height - 取值：
- 数字+px
- 倍数可以是小数 （当前标签的font-size的倍数）
- 可以写到font中
- 格式：
font: [style weight] size[/line-height] family; - 示例：
font: italic 700 66px/2 微软雅黑;
- 格式：
- 行高
文字阴影属性
- 属性名：
text-shadow - 语法
text-shadow: 水平偏移px 垂直偏移px 模糊程度px 颜色; - 取值：
- 水平偏移h-shadow 必须
- 垂直偏移x-shadow 必须
- 模糊程度blur 模糊的程度 可选
- 颜色color 阴影颜色 可选
- 示例效果：
- js语法:
object.style.textShadow="2px 2px #ff0000"
文字外边框
语法: text-stroke：[ text-stroke-width ] || [ text-stroke-color ]
盒子模型
- 简介
- 盒子模型各组成部分的设置
- 盒子模型的外边距margin的合并问题
- 盒子模型的外边距margin的塌陷问题
- 盒子模型行内元素的padding和margin问题
- 盒子模型实现指定尺寸的方法
- 清除默认内外边距
- margin和text-align实现水平居中的区别
- 案例实现
简介
- css中规定每个盒子分别由
- 内容区域content，
- 内边距区域padding，
- 边框区域border，
- 外边距区域margin构成 这就是盒子模型
- 页面中每一个标签都可看作是一个盒子，方便布局
- 浏览器渲染时将网页中元素看成矩形区域，我们形象的称为盒子
盒子模型各组成部分的设置
内容区域content
- 通过width height属性控制，单位px
内边距区域padding
- 通过padding属性控制
- 语法格式：
padding: 上 右 下 左;padding: 上 左右 下;padding: 上下 左右;padding: 上下左右边距;- 上述四种写法的规律就是，从上开始顺时针依次赋值，没有赋到值的就看其对面的值
边框区域border
- 通过border属性控制
- 这是一个复合属性
- 属性值不分先后顺序，任意一个都不能省略
- 语法1：
border:宽度 线条种类 颜色;- 宽度：数字+px
- 线条种类 solid实线 dashed虚线 dotted点线
- 语法2：
border-方位名词:宽度 线条种类 颜色;- 方位名词：
topbottomleftright
- 方位名词：
- 语法3(不常用)：
border-width:宽度;border-style:线条种类;border-color:颜色;
- 语法4(不常用)：
border-width:上宽度 右宽度 下宽度 左宽度;border-style:上线条种类 右线条种类 下线条种类 左线条种类;border-color:上颜色 右颜色 下颜色 左颜色;
外边距区域margin
- 通过
margin属性控制 - 语法格式同padding
*版心居中：margin:0 auto;
版心：网页中的有效内容
盒子模型的外边距margin的合并问题
- 垂直布局和块级元素，上盒子的下外边距会和下盒子的上外边距外边距同时设置，浏览器会自动取最大值。
- 解决方法：只设置其中一个
盒子模型的外边距margin的塌陷问题
- 嵌套的块级元素，子元素的margin-top会作用在父元素上
- 解决方法
- 给父元素设置
border-top或padding-top可以达到预期效果 - 给父元素设置
overflow:hidden;(应该是最优解) - 转换成行内块元素
inline-block - 设置浮动
- 等...
- 给父元素设置
盒子模型行内元素的padding和margin问题
- 对行内元素应用margin属性时，只有设置的左右外边距会起作用
- 对行内元素应用padding属性时，只有设置的左右内边距会起作用
- 解决方法：使用
line-height属性设置 - 总结：行内元素无法设置上下外边距和内边距，可以通过
line-height设置
盒子模型实现指定尺寸的方法
- 一般情况下盒子整体尺寸会因border、padding的设置而被撑大，如设置width500px;border10px;padding10px;则整个盒子的宽度会从500px变成540px。
- 解决方法1手动计算content的宽高
- 如果想要设置整体宽度width500px，border10px，padding10px，则应该设置width为500-10*2-10*2=460px
- 解决方法2自动计算content的宽高
- 给盒子设置
box-sizing:border-box;(内减模式) - 浏览器会自动计算多出的大小，自动从content的width，height属性中减去
- 给盒子设置
清除默认内外边距
- body标签默认有margin8px
- p标签默认有上下margin
- ul标签默认有margin和padding-left
*{
margin: 0;
padding: 0;
}
margin和text-align实现水平居中的区别
text-align指当前元素中内容的对其方式。- 写法：
text-align:center; - 应用于块级元素
- 写法：
margin是指当前元素的外边距 而当指定其上下外边距为0 左右外边距为自动时 表现为相对于父标签居中，不会影响自身的内容- 写法：
margin:0px auto; - 应用于块级元素
- 当元素设置为浮动时，左右
margin设置为auto来居中元素的方式会失效
- 当元素设置为浮动时，左右
- 写法：
案例实现
新浪首页导航条实例编写
<style>
.nav{
width: 100%;
height: 40px;
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
background-color: white;
}
.nav-item{
width:auto;
height: 40px;
background-color: white;
display: inline-block;
text-decoration: none;
text-align: center;
color: #4c4c4c;
font-size: 12px;
line-height: 40px;
padding: 0 5px 0 5px;
}
.nav-item:hover{
background-color: #edeef0;
color: #ff8400;
}
</style>
<div class="nav">
<a href="#" class="nav-item">首页</a>
<a href="#" class="nav-item">文字个数不应影响效果</a>
<a href="#" class="nav-item">新浪导航</a>
<a href="#" class="nav-item">新浪导航</a>
</div>
效果：
新闻列表案例实现
<style>
.news-Box *{
margin: 0;
padding: 0;
/* 所有标签自动内减内边距和border */
box-sizing: border-box;
}
.news-Box{
width: 500px;
height: 400px;
background-color: white;
border:1px solid #ccc;
padding: 20px 30px 0px;
margin: 50px auto;
}
.news-title{
border-bottom: 1px solid #ccc;
font-size: 30px;
line-height: 1;/*1倍字的大小，这样可以去除字的上下边距*/
padding: 10px 0;
color: black;
}
.news-items{
list-style: none;
}
.news-item{
height: 50px;
border-bottom: 1px dashed #ccc;
font-size: 20px;
line-height: 50px;
padding: 0 25px;
}
.news-item-link{
text-decoration: none;
color: #666;
}
</style>
<body>
<div class="news-Box">
<h2 class="news-title">最新文章/News</h2>
<ul class="news-items">
<li class="news-item"><a class="news-item-link" href="#">北京招聘网页设计，平面设计，php开发</a></li>
<li class="news-item"><a class="news-item-link" href="#">北京招聘网页设计，平面设计，php开发</a></li>
<li class="news-item"><a class="news-item-link" href="#">北京招聘网页设计，平面设计，php开发</a></li>
<li class="news-item"><a class="news-item-link" href="#">北京招聘网页设计，平面设计，php开发</a></li>
<li class="news-item"><a class="news-item-link" href="#">北京招聘网页设计，平面设计，php开发</a></li>
</ul>
</div>
</body>
效果：
盒子阴影属性
- 语法格式：
box-shadow:水平偏移px 垂直偏移px 模糊度px 阴影尺寸px inset(内阴影);
背景
颜色的几种表示方式
- 关键字
redgreenblueyellow... - rgb表示法
- 示例
rgb(255,255,255)
- 示例
- rgba表示法
rgb的取值范围0~255- a表示透明度;取值范围0~1 小数表示法 可以省略整数部分0.5写.5
- 示例
rgba(255,255,255,0.5)
- 十六进制表示法
#ffffff#fff简写- 注意是两位一组 其中一组中数字相同的才能简写 于是
#ff0066可以写成#f06
- 注意是两位一组 其中一组中数字相同的才能简写 于是
背景颜色属性
- 属性名：
background-color - 取值：
颜色名关键字、rgbrgba#十六进制 - 注意
- 背景色默认为透明
transparentrgba(XX,XX,XX,0)
- 开发时可以设置背景色 辅助观察和理解元素间的尺寸和层叠关系
- 背景色默认为透明
背景图片
- 属性名：
background-image - 取值：
url("") - 示例：
background-image:url("./path/to/your/file.img") - 注意：
url中可以用单引号 双引号 也可以都不用- 图片为默认重复方式为水平和垂直方向重复（由如下属性控制）
背景图片重复方式
- 属性名：
background-repeat - 取值：
repeat水平和垂直方向重复 （默认）no-repeat不重复repeat-x仅沿x轴重复repeat-y仅沿y轴重复
背景图片位置
- 属性名：
background-position - 使用格式：
background-position:水平方向 垂直方向; - 取值：
- 取方位名词关键字
- 水平：
rightcenterleft - 垂直：
topcenterbottom
- 水平：
- 取坐标：
- 左上角为原点
- 水平方向坐标轴的增长方向为朝右
- 垂直方向坐标轴的增长方向为朝下
- 取具体数值+px 可以取负数表示反方向
- 取方位名词关键字
- 注意：
- 两种取值方式 可以混合使用
background-position:center center;可以简写成background-position:center;
背景复合属性
- 属性名：
background - 标准书写格式：
background:color image repeat position - 注意：
- 四个取值不分先后顺序、随意省略
- 最后一个取值
position其实由两个值组成，分为水平方向和垂直方向，当取关键字时可以颠倒顺序，当取数值时不能颠倒顺序 - 所以当盒子大小和背景图片一致时可直接简写为
background: url();
背景图大小
- 语法:
background-size:宽度 高度; - 取值：
- 像素，数字+px
- 百分比，相对于当前盒子的宽高
- 包含
contain，将背景图等比例缩放，直到某条边或框和盒子一致 - 覆盖
cover将图片等比例缩放，直到刚好填满整个盒子
- 可以连写到
background属性中，语法为background:color image repeat position/size; - 效果示例
img标签和背景图片区别
img是一个HTML标签。不设置宽高以原尺寸显示；设置单个宽高图片以等比例缩放显示；同时设置宽高图片以不等比例缩放显示。background-img是CSS样式。可以设置给div标签，但div必须设置宽高，如果不设置什么都不显示- 选用原则：重要的用img 不重要的装饰性的用背景图
元素(html标签)显示模式
块级元素
- 特点
- 独占一行
- 可以设置宽高
- 宽度默认继承自父级元素
- 代表元素： div h系列 p ul li dl dt dd form header nav footer
行内元素
- 特点
- 一行显示多个
- 不可以设置宽高(不生效)
- 宽度和高度默认由内容撑开
- 代表元素
- span a b u i s strong ins em del
行内块元素
- 特点
- 一行可以显示多个
- 可以设置宽高
- 代表标签
- img input textarea button select ...
- 注意 img标签有行内块特点 但在Chrome调试工具中显示是inline
css元素属性控制显示模式的相互转换
- 属性名：display
- 可选值：
- block 块级元素 块元素可以设置宽高 使用频率多
- inline 行内元素 行内元素不可以设置宽高 使用频率少
- inline-block 行内块元素 行内块可以设置宽高 使用频率多
css三大特性
继承性
- 子元素默认继承父元素
- 自己有相关属性的不再从父元素继承
- a标签的文字颜色和下划线是浏览器给的默认颜色，不再从父元素继承。
- h标签的大小是默认属性，不再从父元素继承。
- 只有文字控制属性才存在继承
- 如：
- color文字颜色
- font系列（font-style font-weight font-size font-family）
- text系列（text-indent text-align）
- line-height行高
- 等
层叠性
- 给标签设置不同的属性，样式会叠加
- 样式叠加：
div{color:red;font-size:10px;}
- 样式叠加：
- 给标签设置相同的属性，样式会覆盖，覆盖的原则为先写的被后写的覆盖
- 最终为绿色：
div{color:red;color:green;}
- 最终为绿色：
- 样式冲突时，只有当选择器优先级相同时才能通过层叠性判断结果
- 大概解释成，单个选择器内的样式冲突时，可以根据层叠性判断，多个选择器之间样式冲突时，必须要优先级相同才能根据层叠性判断。
优先级
多个基本选择器之间的的优先级
- 不同的选择器有不同的优先级
- 优先级高的选择器样式覆盖优先级低的选择器样式
- 优先级关系
继承<标签选择器<通配符选择器<类选择器<id选择器<行内样式<!important- 作用范围广的选择器优先级低
- 作用范围精确的选择器优先级高
- 注意：
!important写在属性值之后分号之前!important无法被继承- 实际开发中不建议使用
!important
- 示例：最终颜色为pink
多个复合选择器之间的优先级的权重的计算
如果使用复合选择器，需通过叠加计算方法，判断最终哪个选择器的优先级最高,优先级高的覆盖优先级低的。
叠加公式：
先比较各复合选择器优先级的第一级，值最大的选择器的优先级最高，如果无法得出最大值
再比较各复合选择器优先级的第二级，值最大的选择器的优先级最高，如果无法得出最大值，以此类推
如果都比较不出来，再根据层叠性确定
!inportant优先级依然是最高
计算权重优先复合选择器的优先级的权重计算示例：
- 最终字的颜色为red
- 最终显示为天蓝色skyblue
- 最终为blue蓝色
- 最终为天蓝色
- 最终为pink
- 最终为黄色
- 最终为红色
- 最终字的颜色为red
标准流
标准流的概念
- 标准流也称文档流，是浏览器渲染排版网页的默认规则，规定了元素的排列方式
- 常见标准排版规则
块级block- 独占一行，从上往下，垂直布局
行内inline或行内块inline-block- 空间不够换行，从左往右，水平布局
标准流的局限性
- 无法让多个块级元素显示在一行，
- 无法让行内块元素完美显示在一行（会因为代码的换行而导致显示效果中产生间距）
<style>
div{
display: inline-block;
width: 100px;
height: 100px;
}
.one{
background-color: pink;
}
.two{
background-color: green;
}
</style>
<body>
<div class="one">div1</div>
<div class="two">div2</div>
</body>
- 显示效果：
浮动
浮动的作用
- 早期用来做图文环绕
- 在文字中插入图片，然后给图片设置浮动属性
- 现在用来做网页布局
让多个标准流的块级元素渲染在一行
```html <style> div{ display: inline-block; width: 100px; height: 100px; float: left; } .one{ background-color: pink; } .two{ background-color: green; } </style> <body> <div class="one">div1</div> <div class="two">div2</div> </body> ```效果：
浮动的特点
浮动元素会脱离标准流的控制，简称脱标，在标准流中不占位置，其他非浮动元素会占领空出的位置
浮动元素比标准流高半个等级，会覆盖标签不会覆盖内容
浮动会顶对齐
浮动找浮动，下一个浮动元素会在上一个浮动元素左右排列
可以用margin控制布局
浮动后的元素可以设置宽高，能在一行显示，具备行内块特点
浮动后的元素不能通过margin:0 auto;方式居中，
- 可能是因为这种方式居中的原理是设置上下外边距为0，然后让浏览器根据当前标签的父标签的宽来自动auto计算当前标签的左右外边距实现居中，而当设置为浮动后，元素脱离了标准流，相当于没有父标签了，就没办法自动计算左右外边距了
浮动布局案例1实现
- 要求使用浮动
- 写bug记录......
- 设置一个div版心居中时，记住要先给他加宽度，否则默认占父元素宽度的100%
<style>
.nav{
height: 40px;
background-color: #333;
}
.head,
.content{
margin: 0 auto;
}
.head{
height: 100px;
width: 1226px;
background-color: #ffc0cd;
}
.content{
width: 1226px;
height: 460px;
background-color: red;
}
.left{
width: 234px;
height: 460px;
background-color: #ffa500;
float: left;
}
.right{
width: 992px;
height: 460px;
background-color: #87ceeb;
float: left;
}
</style>
<body>
<div class="nav"></div>
<div class="head"></div>
<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
效果：
浮动布局案例2实现(小米产品页)
<style>
*{
margin: 0;
padding: 0;
}
.box{
margin: 0 auto;
width: 1226px;
height: 614px;
background-color: red;
}
.left{
float: left;
width: 234px;
height: 614px;
background-color: #800080;
}
.right{
float: left;
width: 992px;
height: 614px;
background-color: white;
}
.item{
float: left;
margin: 0 0 14px 14px;
width: 234px;
height: 300px;
background-color: #87ceeb;
}
ul{
list-style: none;
}
</style>
<div class="box">
<div class="left"></div>
<div class="right">
<ul>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
</div>
</div>
效果：
浮动布局案例3实现(网页导航条)
<style>
*{
margin: 0;
padding: 0;
}
.nav{
width: 640px;
height: 50px;
background-color: #ffc0cb;
}
.nav li{
/* 网站的导航条应该用li */
/* 根据li独占一行的特性判断其为block元素 */
float: left;
}
.nav .item{
display: block;
width: 80px;
height: 50px;
text-align: center;
font-size: 16px;
line-height: 50px;
color: white;
text-decoration: none;
}
.nav li:hover{
background-color: #008000;
}
ul{
list-style: none;
}
</style>
<div class="nav">
<ul>
<li><a href="#" class="item">新闻1</a></li>
<li><a href="#" class="item">新闻2</a></li>
<li><a href="#" class="item">新闻3</a></li>
<li><a href="#" class="item">新闻4</a></li>
<li><a href="#" class="item">新闻5</a></li>
<li><a href="#" class="item">新闻6</a></li>
<li><a href="#" class="item">新闻7</a></li>
<li><a href="#" class="item">新闻8</a></li>
</ul>
</div>
效果:
清除浮动
- 含义：清除浮动属性给其他标签带来的影响；
- 当子元素浮动，子元素就不在标准流中，于是就不能撑开标准流的块级父元素，如果父元素没有设置高度，子元素浮动后父元素的高度为0，因为子元素浮动后不占位置；
设置行高法
- 如果内容允许给父元素设置固定的高 就设置固定的高
添加额外标签清除法
在父元素内容最后添加块级元素(一般类名为
clearfix的div)，给添加的元素设置clear:both;clear属性：专为解决此问题打造，取值为left时清除左浮动影响，取值为right时清除右浮动影响，取值为both时清除全部的影响。缺点：额外添加了标签，复杂化了HTML结构
<style> .clearfix{ clear:both; } </style> <div> <div>浮动1</div> <div>浮动2</div> <div class="clearfix"></div> </div>
单伪元素清除法
先给父标签附加类名(clearfix),然后利用after伪元素
优点；
基本写法
.clearfix::after{ content:''; display:block; clear:both; }补充写法
.clearfix::after{ content:''; display:block; clear:both; /* 多出的两行是为了解决低版本浏览器兼容性问题，某些浏览器(ie6、7、8)会认为伪元素有高度 */ height:0; visibility:hidden; }
双伪元素清除法
/* .clearfix::before,出现的目的在于解决外边距塌陷问题 */
/* 塌陷问题的产生的情形是，嵌套的块级元素，这里把两个伪元素转换成table元素，就避免了这个问题 */
.clearfix::before,
.clearfix::after{
content:"";
display:table;
}
.clearfix::after{
clear:both;
}
overflow属性清除
- 直接给父元素设置属性
overflow:hidden; - 优点：方便
去除列表默认符号
ul{
list-style: none;
}
效果对比：
定位
网页常见布局方式
- 标准流： 块级元素垂直布局；行内/行内块元素水平布局
- 浮动： 让块级元素水平布局
- 定位
- 可以自由的让元素摆放在网页中任意位置
- 应用于盒子的层叠情况
定位的使用步骤
- 设置定位方式
- 属性名
position - 属性值
static静态定位(默认，不定位)relative相对定位absolute绝对定位fixed固定定位
- 属性名
- 设置偏移量
- 属性名
topbottomleftright水平和垂直方向各选其一 - 属性值 像素 百分比
- 属性名
相对定位
- 相对于 自己 原先的位置移动
- 不会改变元素显示模式
- 仍然占有原先的位置(没有脱标)，空出的位置不会被其他元素占用
- 不写偏移属性不改变位置
- 同时写 left right 只有 left 会生效，无论顺序
- 同时写 top bottom 只有 top 会生效，无论顺序
.box{
/* 相对于自己原先位置移动10px */
position: relative;
top:10px;
left:10px;
}
绝对定位
- 相对于 非静态定位 的第一个 父(祖宗)元素 进行定位
- 如果其父元素有定位就相对于父元素定位
- 如果其父元素没有定位则相对浏览器窗口定位
- 父级可以是相对定位也可以是绝对定位，一般用相对定位;(子绝父相)
- 会改变元素的显示模式，块元素会变行内元素
- 不再占有原先位置(脱标),其他元素会填充该元素原先所在的位置
- 当设置
position: absolute;却不指定偏移时，元素保持原先位置(无论其父元素是不是静态定位)
绝对定位的居中
- 设置绝对定位后不能使用
margin 0 auto;方式居中 - 解决办法1(手动计算)
.box{
/* 绝对定位到父元素50%的位置，然后反方向移动宽高的一半 */
position: absolute;
left:50%;
top:50%;
margin-left: -250px;
margin-top: -150px;
width: 500px;
height: 300px;
}
- 解决办法2(自动计算)
.box{
/* 使用transform属性移动自身宽高的一半 */
position: absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
width: 500px;
height: 300px;
}
绝对定位fixed
- 相对于浏览器窗口定位，不随滚动而位移
- 会改变元素的显示模式，块元素变为行内块元素
- 不再占有原先位置(脱标),其他元素会填充该元素原先所在的位置
修改定位元素的层级关系
元素的层级关系
不同布局方式元素的层级关系
标准流 < 浮动 < 定位
不同定位之间的层级关系
- 相对、绝对、固定默认层级相同，会根据html标签代码的书写顺序（而不是css代码的书写顺序）来渲染，先渲染的会被后渲染的覆盖
z-index
- 对于有定位属性的元素，想要要修改其渲染后的覆盖顺序，只需要调整html标签的顺序
- 如果不想修改html标签的顺序，可以使用
z-index:整数;属性来控制，相当于指定其在第几图层。 - z-index只对有定位属性的元素生效
- 定位的默认层级是0
文字的垂直对齐
概念
- 浏览器会将
行内元素和行内块元素当成文字处理，默认的对齐方式是基线对齐 块元素不会被当成文字处理。
行内块元素的基线、底线、顶线、中线的概念
- 顶线：中文汉字的的上端沿
- 中线：顶线和底线的中间线
- 基线:（base line）英文字母“x”的下端沿；
- 底线：中文汉字的下端沿
实测效果
- 没有文字时，按钮默认基线为下边缘，文本框的基线为文字输入区域下边缘
- 基线对齐不能实现完美对齐
文本框和按钮的中线对齐
vertical-align: middle;
图片和按钮框的中线对齐
默认基线对齐
修改后
嵌套关系的div和文本框的顶对齐
- 修改前
- 修改为顶对齐后
嵌套关系的div和img的中线对齐
情形1
- 修改前:div高度为默认，img高度设置为400px,但由于浏览器默认是基线对齐，底部会被撑开一条线
- 解决办法
- 修改为中线对齐
- 另一种解决方法是把img转换成块元素
- 效果：
情形2
修改前：div拥有固定行高
修改图片为中线对齐，同时在div中设置文字行高
line-height为自身的高度，便可实现居中
更进一步的，因为图片是行内块，所以要使图片水平方向居中，只需给父级元素添加text-aline:center
该属性的其他属性值
- 基线对齐（vertical-align : baseline）使元素的基线同基准元素（取行高最高的作为基准）的基线对齐
- 顶端对齐（vertical-align : top）是将元素的行内框的顶端与行框的顶端对齐
- 底端对齐（vertical-align : bottom）与顶端对齐（vertical-align : top）相反
- 中间对齐（vertical-align : middle）通常使用在图片上，将图片的垂直方向的中线与文本行的中线（文字元素的行内框中线）对齐。
- 文本顶端对齐（vertical-align : text-top）是将元素行内框的顶端同行框的顶线对齐
- 文本底端对齐（vertical-align : text-bottom）是将元素行内框的底端同行框的底线对齐
- 上标（vertical-align:super）使元素的基线相对于基准元素的基线升高；
- 下标（vertical-align:sub）使元素的基线降低，移动的幅度CSS规范中没有规定，由浏览器来决定。
鼠标光标类型
- 属性名cursor
- 属性值
- default 默认鼠标箭头
- pointer 小手
- text 工字形光标
- move 十字光标
圆角边框
- 属性名 border-radius
- 属性值
- 数字+px
- 百分比
- 书写格式
border-radius: 左上 右上 右下 左下;;- 可以像padding一样的格式省略为只写一个值、两个值、三个值或写全四个值；
- 取值含义
- 画正圆
- 对正方形设置该属性
border-radius:50%;- 该属性的值最大取50%
- 应用：头像
- 画胶囊
- 对长方形设置该属性
border-radius:高度的一半;- 应用
溢出内容显示效果
- 属性名：overflow
- 属性值：
- visible 溢出部分可见（默认）
- hidden 溢出部分隐藏
- scroll 无论是否溢出，显示滚动条
- auto 自动根据内容是否溢出而显示滚动条
- 测试效果
- visible
- hidden
- scroll
- auto
- visible
元素的隐藏
visibility:hidden;- 不常用，
- 只是单纯隐藏，仍然占用标准流
display:none;- 常用
- 隐藏后不占用标准流
- 应用：子菜单：
- 案例：
- 先设置其默认情况隐藏
- 再设置其鼠标悬停时的显示模式为块
- 效果
- 先设置其默认情况隐藏
透明属性
属性名：opacity
取值：0~1之间的数字；0表示完全透明，1表示完全不透明
作用：控制元素的整体透明度（包括其文字、图片的内容）
过渡
- 让元素的样式慢慢变化，常配合hover使用
- 语法:
transition: 属性名 时间s;transition: 属性名 时间s,属性名 时间s,属性名 时间s,属性名 时间s;transition: all 时间s;
- 注意点
- 默认状态 和
hover状态样式不同，才能有过渡效果 transition属性给需要过渡的元素本身加transition属性设置在不同状态中，效果不同的
1. 给默认状态设置，鼠标移入移出都有过渡效果
2. 给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果
- 默认状态 和
- 示例
<style>
.test{
width: 100px;
height: 100px;
background-color: green;
/* transition: width 1s; */
/* transition: width 1s,background-color 1s; */
transition: all 1s;
}
.test:hover{
width: 200px;
background-color: red;
}
</style>
<div class="test"></div>
效果：
文字
去除鼠标选中input-text后显示的默认边框
- 设置属性：
outline:none; - 去除前
- 取出后
css3的书写顺序
可以先按编写思略写，再按能使浏览器加载更快的书写顺序修改
编写思路
- 从外到内
- 先宽高背景色
- 再调节内容位置
- 最后控制文字细节
使浏览器加载更快的书写顺序
- （定位）
- 浮动 或 display
- 盒子模型相关属性
- width height
- background-color
- margin border padding
- 文字样式 font系列
正确书写顺序使浏览器加载更快的原因
该部分复制自CSDN
正确的书写顺序
- 定位属性：position display float left top right bottom overflow clear z-index
- 自身属性：width height padding border margin background
- 文字样式：font-family font-size font-style font-weight font-varient color
- 文本属性：text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow
- css3中新增属性：content box-shadow border-radius transform……
目的：减少浏览器reflow（回流），提升浏览器渲染dom的性能
原理：浏览器的渲染流程为——
- 解析html构建dom树，解析css构建css树：将html解析成树形的数据结构，将css解析成树形的数据结构
- 构建render树：DOM树和CSS树合并之后形成的render树。
- 布局render树：有了render树，浏览器已经知道那些网页中有哪些节点，各个节点的css定义和以及它们的从属关系，从而计算出每个节点在屏幕中的位置。
- 绘制render树：按照计算出来的规则，通过显卡把内容画在屏幕上。
css样式解析到显示至浏览器屏幕上就发生在②③④步骤，可见浏览器并不是一获取到css样式就立马开始解析而是根据css样式的书写顺序将之按照dom树的结构分布render样式，完成第②步，然后开始遍历每个树结点的css样式进行解析，此时的css样式的遍历顺序完全是按照之前的书写顺序。在解析过程中，一旦浏览器发现某个元素的定位变化影响布局，则需要倒回去重新渲染，正如按照这样的书写书序：
```css width: 100px; height: 100px; background-color: red; position: absolute; ```当浏览器解析到position的时候突然发现该元素是绝对定位元素需要脱离文档流，而之前却是按照普通元素进行解析的，所以不得不重新渲染，解除该元素在文档中所占位置，然而由于该元素的占位发生变化，其他元素也可能会受到它回流的影响而重新排位。最终导致③步骤花费的时间太久而影响到④步骤的显示，影响了用户体验。
所以规范的的css书写顺序对于文档渲染来说一定是事半功倍的！
html嵌套原则
- 块级元素一般作为大容器，
- 可以嵌套：
- 块级元素
- 行内元素 行内块元素 （这两个只能嵌套行内和行内块元素）
- 但p标签禁止嵌套div p h等标签
- h和p禁止互相嵌套
- 可以嵌套：
- a标签可以嵌套任意标签
- 但不要a标签嵌套a标签
vscode的emment插件语法（自带插件）
- div+类名 div.class1
- p+id p#id
- a+id+类名 a.id1#class1
- 同级标签 a+p
- 嵌套标签 ul>li
- 多个 ul3>li3
- 内容 ul*3>li{$}*3
- css
- css提示规律
- 按首字母提示
w300+h200+bgc
- 按首字母提示
- css提示规律
pxcook像素大厨的基本使用
- 写网页的测量工具