一、结构伪类选择器-基本使用
- E:first-child 第一个
- E:last-child 最后一个
- E:nth-child(n) 第n个
- E:nth-child(公式) 第“公式”个(如:2n偶数,2n-1奇数,5n 5的倍数,n+5 5个以后的标签,-n+5 第5个以前的标签)
li:first-child
二、伪元素选择器
- E::before 在E元素最前面添加一个伪元素
- E::after 在E元素最前面添加一个伪元素
必须设置content:" ",默认行内元素,权重同标签选择器。
div::before{
content:"老鼠"
}
三、盒子模型
- 内容区域-width&height
- 内边距-padding:数字+单位
- padding后加四值:上右下左;三值:上,左=右,下;两值:上下,左右
- 单独某方向padding-方位名词
- 边框线-border:边框线粗细 线条样式 颜色
- 线条样式:solid实线 dashed虚线 dotted 点线
- 单独某方向border-top(Emmet:bdt)、border-right、border-bottom、border-left
外边距-margin
- margin后加四值:上右下左;三值:上,左=右,下;两值:上下,左右
- 单独某方向margin-方位名词
- margin左右设置auto可实现水平居中,前提:盒子需要有宽度
四、盒子模型-尺寸计算
盒子尺寸=内容尺寸+border尺寸+内边距padding尺寸
- 1、手动做减法
- 2、盒子的内减模式
- border-sizing:border-box;
一般在清楚默认样式通配符*{}中设置内减模式。
五、清除默认样式
很多标签都有默认的内外边距,需要先清除(未来可以严格按照设计稿设置)
*{
margin:0;
padding:0;
//border-sizing:border-box;
}
li{
list-style:none;//去掉列表的项目符号
}
六、盒子模型-元素溢出:内容超出盒子大小
- overflow:
- hidden 溢出隐藏(最常用)
- auto 溢出才显示滚动条
- scroll 无论是否溢出都有滚动条
七、外边距问题-合并和塌陷
- 合并现象
- 【表现】垂直兄弟元素,上下margin会合并——取两个margin中的较大值生效
- 【解决方法】
- 只设置一个盒子的外边距
- 塌陷问题
- 【表现】父子级标签,子级添加上外边距会产生塌陷问题——子级和父级一起往下移动
- 【解决方法】
- 取消子级margin,父级设置padding(推荐,规避问题)
- 父级设置overflow:hidden(原理:让浏览器找到正确的盒子边缘)
- 父级设置border-top属性(原理:让浏览器找到正确的盒子边缘)
八、行内元素
- 行内元素垂直方向padding不生效,仅水平可以改变
- 垂直方向修改,加行高line-height
九、盒子模型-圆角
- border-radius:数字+单位
圆角从左上角顺时针赋值,没有取值与对角取值同
- 应用:正圆形
- 属性值 宽高的一半(50%)
- 应用:胶囊形状
- 属性值 盒子高度的一半
十、盒子模型-阴影
- box-shadow:x偏移量 y偏移量 模糊半径 扩散半径 颜色 内外阴影
给元素设置阴影效果
十一、写盒子模型CSS的顺序
- 1、盒子模型属性
- 2、文字样式
- 3、圆角、阴影等修饰属性
十二、标准流(了解)
标签:默认显示模式叫标准流
非标准显示模式:Flex布局
- 浮动-float
- left
- right
将标签内顶对齐,具备行内块显示模式,浮动的盒子会脱标
- 清除浮动
- 1、额外标签法:在父元素最后加一个块级元素类名为clearfix,并设置CSS属性clear:both(了解)
- 2、单伪元素法:给父元素内容的最后添加一个块级元素,设置CSS属性clear:both(到时候直接复制粘贴)
- 3、双伪元素法:(推荐)
- 4、父元素添加CSS属性——overflow:hidden
//单伪元素法 <div class="top clearfix"></div> .clearfix::after{ content:""; display:block; clear:both; } //双伪元素法 .clearfix::before //before解决外边距塌陷问题 .clearfix::after{ content:""; display:table; } .clearfix::after{ //清除浮动 content:""; clear:both; }
父级无高,子级浮动会使页面错乱
十三、Flex布局
1、什么Flex
弹性布局,适合结构化布局
flex不存在脱标现象
2、Flex组成
设置方式:给父元素设置display:flex,子元素可以自动挤压或拉伸
组成部分:
- 弹性容器:父级元素
- 弹性盒子:放在父级元素的盒子
- 主轴
- 侧轴
3、主轴与侧轴对齐方式
(1)主轴对齐方式
justify-content:
- flex-start 左侧对齐
- flex-end 右侧对齐
- center 居中
- space-between 弹性盒子之间的间距相等(左侧无间距)
- space-around 间距出现在盒子两侧-盒子之间的间距是两端间距的2倍
- space-evenly 间距出现在盒子两侧-盒子之间的间距都相等
(2)侧轴对齐方式
align-items:给容器设控制所有
- scretch 无高度尺寸默认垂直拉伸,有高度则无效
- center 居中
- (了解)flex-first 上侧对齐
- (了解)flex-end 下侧对齐
align-self:控制某个盒子
- 搭配nth-child(n)伪元素
(3)修改主轴方向
主轴默认水平方向
flex-direction:
- row 主轴为垂直方向(默认)
- column 主轴变垂直方向
(4)弹性伸缩比
flex:
- 整数数字(占用父级剩余尺寸的份数)
(5)弹性盒子换行
flex-wrap:
- wrap 父级宽度不够换行显示
- nowrap 不换行(默认)
(6)行对齐方式
跟主轴对齐方式同,对单行的弹性盒子(无flex-wrap:wrap)不生效
align-content:
- flex-start 左侧对齐
- flex-end 右侧对齐
- center 居中
- space-between 弹性盒子之间的间距相等(左侧无间距)
- space-around 间距出现在盒子两侧-盒子之间的间距是两端间距的2倍
- space-evenly 间距出现在盒子两侧-盒子之间的间距都相等
技巧:
1、确定一个方案,首先要从两方面分析:标签、ul样式
2、自动创建一个ul内容为1、2、3、4
ul>li{$}*4
十四、学成在线项目
1、准备工作
新建文件夹study,包含文件:
- images文件夹:存放固定使用的图片
- uploads文件夹:非固定使用的图片,如商品
- css文件夹:
- basic.css
- index.css
- index.html:首页HTML文件
2、版心效果
设置一个类选择器,后面需要版心居中则使用该标签
.wrapper{ margin:0 auto; width:1200px; }
3、网页制作思路
(1)布局思路:先整体再局部,从外到内,从上到下,从左到右。
(2)CSS实现思路
a.画盒子,设置宽高背景色
b.调整盒子位置,flex布局、内外边距
c.控制图片、文字内容样式
4、logo制作技巧
h1>a>网站名词(搜索关键字)
.logo a { display: block; width: 195px; height: 41px; background-image: url(../images/logo.png); font-size: 0;//使得a中内容不显示并达到搜索引擎优化效果 }