结构伪类选择器
根据html结构来进行元素的选择 第一个子元素 父级 子级:first child {} 最后一个子元素 父级 子级:last-child {} 任意的子元素 父级 子级:nth-child(数字/关键字) {} 数字1.....n, n代表全部的元素 关键字 even 偶数 odd 奇数 公式 2n 偶数/2的倍数 4n 奇数 2n+1 2n-1 从第几个开始 n+6 前三个 -n+3 了解 从后选择第一个子元素 :nth-last-child() {} 根据类型选择元素 :nth-of-type() {}
伪元素
利用css创建的元素 ::before {}在内容之前 ::after {} 在内容之后 注意 1.必须添加content;‘’; 2. 伪元素是行内元素 3. 单标签不能使用伪元素 4. 低版本的浏览器不识别 :: 双冒号的写法是H5提供的 标准流 文档流:默认的元素显示模式就是文档流 块元素 垂直布局 上下布局 行内和行内块 水平布局 左右结构 一般不会利用行内和行内块进行布局
浮动
作用 1、早起:图为环绕 2、现在:页面布局 => 块级元素水平布局 代码 float:none; 不浮动 float:left; 左侧浮动 float:right; 右侧浮动 特点 1、脱标不占位 2、浮动比标准流高半个级别,能压住标准流的元素,但是不能压住文字和图片 3、浮动找浮动,浮动元素会紧挨着兄弟元素浮动 4、元素浮动后特点 一行多个显示 可以设置宽高 注意: 浮动元素本身不能通过margin: 0 auto; 不能给浮动元素的父级添加 text-align: center 居中浮动元素 技巧:兄弟元素,有浮同享 案例 网页布局案例 => 小米页面 小米手机模块 网页导航 补充:jd浮动案例 微金所导航
清除浮动
介绍 目的:清除浮动带来的影响 影响:子元素浮动,脱标不占位置,撑不开父级的高度,导致页面布局出现错误 效果:父级有高度 方法 1、高度法:给父级添加高度 优点:简单粗暴 缺点:如果不确定内容的高度,则不能设置 2、额外标签法:3WC 推荐的做法 步骤: 给浮动元素的父级的最后添加一个块级元素 给这个块级元素设置 clear: both; 优点:官方推荐 缺点:增加了很多没有意义的标签 3、单伪元素清除浮动 .clearfix::after {
display: block; content: ''; clear: both; } .clearfix::after { display: block; content: '.'; clear: both; /* 补充写法 */ height: 0; visibility: hidden; } 4、双伪元素清除浮动 .clearfix::before, .clearfix::after { display: table; content: ''; } .clearfix::after { clear: both; } 5、给父级加overflow: hidden;