目录
- 一、CSS的引入方式
- 二、CSS基础选择器
- 三、CSS选择器进阶(复合选择器)
- 四、字体和文本样式
- 1.字体样式
- (1)字体大小 font-size
- (2)字体粗细:font-weight
- (3)字体样式:font-style
- (4)字体类型:font-family
- (5) 自定义字体 @font-face
- 复合属性 front
- (6)文字颜色:color
- 2.文本样式
- 1. 文本缩进:text-indent
- 2. 文本水平对齐方式: text-align
- 3. 文本垂直对齐方式:vertical-align
- 4. 文本修饰: text-decoration
- 5. 文字阴影: text-shadow
- 6. 文本走向: text-orientation
- 7. 文本行布局: writing-mode
- 8. 文本换行:white-space
- 9. 单词换行:word-wrap
- 10. 文字间距:letter-spacing
- 11. 单词间距:word-spacing 和 字母转换 text-transform
- 12. 行高:line-height
- 13. 文字溢出: text-overflow
- 14. 文本排版方向:direction
- 综上例子:
- 五、列表样式 list-style
- 六、背景
- 七、元素显示模式
- 八、CSS的三大特征
- 九、盒模型
- 十、CSS伪类
- 十一、CSS伪元素
- 素材源:
一、CSS的引入方式
1.内嵌式:CSS 写在style标签中
提示:style虽然可以写在任意位置,但是通常约定写在head中
当前页面 小案例
2.外联式:CSS 现在一个单独.css文件中
提示:需要通过link标签在网页中引入
多个页面 项目中
3.行内式:CSS 写在标签的style属性上
提示:基本不推荐使用,之后会配合js使用
当前标签 配合js使用
4.也可以使用模块化的思想直接引用(在其他.css文件中引用):
@import url(./reset.css);
二、CSS基础选择器
1.标签选择器
结构:标签名 { CSS属性: 属性值 }
作用:通过标签名,找到页面中所有这类标签,设置样式
注意点:
- 标签选择器是选择一类标签,而不是某一个
- 标签选择器无论嵌套关系有多深,都能找到对应标签
2.类选择器
结构:.类名 { CSS属性: 属性值 }
作用:通过类名,找到页面中所有这类标签,设置样式
注意点:
- 所有标签都有class属性,class属性就被称之为类名
- 类名可以由数字、字母、下划线、中划线组成,不能以数字和中划线开头
number_1 对 1num ❌ _uuu (类样式库) 对 -YCS ❌ qy_11 对 - 一个标签可以拥有多个类名,类名之间需要用空格隔开
- 类名可以重复,一个类选择器可以同时选中多个标签
3.id选择器
结构:#id属性值 { CSS属性: 属性值 }
作用:通过id属性值,找到页面中所有这个id属性值的标签,设置样式
注意点:
- 所有标签都有id属性
- id属性类似于身份正号码,在一个页面中是唯一的,不可重复使用
- 一个标签只能有一个id属性值
- 一个id选择器只能选中一个标签
4.通配符选择器(极少用)
结构:* { CSS属性: 属性值 }
作用:找到页面中所有标签,设置样式
注意点:
- 开发中使用极少,只会在极特殊的情况下使用
- 在一些案例中可能会使用用于去除标签中默认margin和padding
5.属性选择器
结构:[属性名(各种条件)] { CSS属性: 属性值 }
作用:通过属性名或者符合筛选条件的属性名,找到页面中所有这类标签,设置样式
种类
- [属性名] 包含什么属性名的标签
- [属性名=‘a’] 属性值等于a的标签
- [属性名^=‘a’] 属性值以a开头的标签
- [属性名*=‘a’] 属性值包含a的标签
- [属性名$=‘a’] 属性值以a结尾的标签
- [属性名~=‘a’] 属性值至少有一个匹配
css代码:
/* 会选中属性为name的标签 */
[name] {
background-color: burlywood;
}
/* 会选中div中 属性值=age的标签 */
div[class='age'] {
background-color: yellowgreen;
}
/* 选中属性值以a开头的标签 */
[class^='a'] {
font-size: 20px;
}
/* 属性值包含t的标签 */
[name*='t'] {
color: violet;
}
/* 属性值以s结尾的标签 */
[class$='s'] {
background-color: #096;
}
html代码:
<body>
<div class="age">age1</div>
<p class="ages">age2</p>
<div name="elements" class="elements">elements1</div>
<p name="switch">elements2</p>
</body>
三、CSS选择器进阶(复合选择器)
1.后代选择器
作用:根据HTML嵌套关系,选择父元素 后代中 满足条件的元素
选择器语法:选择器1 选择器2 { css }
结果:在选择器1找到所有符合选择器2的后代(儿子、孙子、重孙…)
注意点:
- 后代包括 儿子、孙子、重孙…
- 后代选择器 选择器与选择器之间用空格隔开
2.子代选择器
作用:根据HTML嵌套关系,会选择离它最近一级的子元素,子元素里面其他元素不会被选择
选择器语法:选择器1 > 选择器2 { css }
结果:在选择器1找到所有符合选择器2的后代(儿子)
注意点:
- 子代包括 儿子
- 子代选择器 选择器与选择器之间用 > 隔开
3.并集选择器
作用:同时选中多组标签,设置相同的样式
选择器语法:选择器1 , 选择器2 { css }
结果:选择器1 和 选择器2 选中标签,都改变样式
注意点:
- 并集选择器 选择器与选择器之间用 , 隔开
- 并集选择器可以基础选择器也可以复合选择器
- 并集选择器通常一行写一个,提高代码可读性
4.交集选择器
作用:选中页面中 同时满足 多个选择器的标签
选择器语法:选择器1选择器2 { css }
结果:标签,即选择器1选中,又能被选择器2选中标签,改变样式
注意点:
- 交集选择器 选择器与选择器之间紧挨着
- 交集选择器如果有标签的情况,标签选择器必须写在前面
5.伪类选择器
hover(使用标签较多)
兄弟之间的样式改变:.box:hover~.nav -->当鼠标移入box时改变兄弟元素nav的样式
作用:选中时候鼠标悬停在元素上的状态
选择器语法:选择器:hover { css }
注意点:
- 伪元素选择器只在特定状态下显示
6.a标签的伪类
- a: link: 没有被访问过的标签样式
- a: active: 鼠标点击时候的标签样式
- a: visited: 被访问过的标签样式
- a: hover: 鼠标悬停在元素上的状态
7.input标签的伪类
- :focus: 鼠标选中输入光标设置 input:focus {background-color: #333;} 定光标,改变背景样式
- ::placeholder: 伪类元素占位符内容更改
综上例子:
css代码:
<style>
.box1 .a {
background-color: palegreen;
}
.box2 > p {
color: brown;
}
.a,
.xx2 {
font-weight: 700;
}
p.x2 {
color: #096;
}
a:link {
color: pink;
}
a:active {
font-size: 20px;
color: tomato;
}
a:hover {
font-weight: 700;
color: antiquewhite;
}
a:visited {
color: steelblue;
}
input:focus {
background-color: #096;
}
input::placeholder {
color: pink;
}
</style>
html代码:
<body>
<div class="box1">
<div class="a">box1 a</div>
<p class="a">box1 p</p>
</div>
<div class="box2">
<div class="x2">box2 x2
<p class="x2">box2 x2 p</p>
</div>
<p class="xx2">xx2</p>
</div>
<a href="#">This is a</a><br><br>
TEXT<input type="text" placeholder="一个文本框">
</body>
效果:
四、字体和文本样式
1.字体样式
(1)字体大小 font-size
取值:数字 + px、 数字 + em、 数字 + rem
em:一个文字的大小,
rem:根据 根元素计算(没有父元素的元素 ,HTML元素是根元素)
注意点:
* 谷歌浏览器默认文字大小是16px
* 单位需要设置,否则无效
* 谷歌浏览器默认最小字体就12px
(2)字体粗细:font-weight
取值:数字 (100、200、300、400…900) 400正常,700加粗 大于400是加粗 小于400是变细
关键词: normal=400(正常) bold=700 / bolder=900(加粗) lighter=100 (变细)
注意点:
* 不是所有字体都提供了九种粗细,因此部分取值在页面中没变化
* 实际开发中以:正常、加粗两种取值使用最多
(3)字体样式:font-style
取值:normal(正常)italic(倾斜)
(4)字体类型:font-family
取值:文字名称
/* 从左到右依次查找能在本机显示的字体 都没有就显示默认字体*/
font-family: "MV Boli",喻兵行楷,宋体,微软雅黑, Arial;
字体没有特殊符号和空格,不加双引号或者单引号
渲染规则:
1. 从左到右按顺序查找,如果电脑中未安装该字体,则显示下一个字体
2. 如果都不支持,此时会根据操作系统,显示最后字体系列的默认字体
注意点:
1. 如果字体名中存在多个单词,用引号包裹
2. 最后一项字体系列不需要引号包裹
3. 网页开发时,尽量使用系统常见自带字体
(5) 自定义字体 @font-face
@font-face: 自定义字体(把字体文件存放在网站 目录中,用户系统不需要安装字体)【css3新增】
.ttf 的文本
/* 自定义字体 */
@font-face {
/* 自定义字体 名字 */
font-family: myfont1;
/* 添加要引入的字体样式 */
src: url(./font/1.ttf);
}
/* 运用自定义字体时,直接引用自定义名字 */
.box1 {
font-family: myfont1;
}
复合属性 front
font: style weight size family
省略要求:只能省略前两个,如果多省略了就相当于默认值
注意点:
要么就连写,要么就把单独写的内容放在下面
(6)文字颜色:color
取值:关键字(red、green、black)
十六进制:rgb( )、 rgba( ) -->三元色+透明度
2.文本样式
文本样式基本都是可以继承父元素的
1. 文本缩进:text-indent
取值:数字 + px、 数字 + em、 数字 + rem
/* 常用em让电脑计算缩进字符*/
text-indent: 2em;
2. 文本水平对齐方式: text-align
取值:left(左对齐)、right(右对齐)、center(居中)
注意点:
如果需要文本水平居中,text-align属性给文字所在标签(文本的父级标签)设置
3. 文本垂直对齐方式:vertical-align
一般用于图片元素与文本的混排
1.单位: px,em,rem,百分比 (正数往 上移,负数往 下移 )
sub 下标元素,类似sub标签
super 上标元素,类似sup标签
2.属性值:
baseline 基线对齐(默认值)
top 顶线对齐
middle 中线对齐
bottom 底线对齐
text-top 与父元素文本顶部对齐
text-bottom 与父元素文本底部对齐
vertical-align: top(顶线) middle(中线) baseline(基线) bottom(底线);
4. 文本修饰: text-decoration
取值:underline(下划线)、line-through(删除线)、overline(上划线)、none(无装饰)
注意点:
开发中会使用 text-decoration: none; 清除a标签的默认下划线
5. 文字阴影: text-shadow
取值:1px 1px 1px red
1. 水平偏移量
2. 垂直偏移量
3. 模糊半径(阴影大小)
4. 阴影颜色
例子:火焰字,彩虹字,石头字
6. 文本走向: text-orientation
取值:upright(将英文改成纵向)、mixed(正常)
text-orientation: upright;
7. 文本行布局: writing-mode
取值:vertical-lr(将英文改成垂直显示,汉字不会有效果)
writing-mode: vertical-lr;
8. 文本换行:white-space
处理元素内容的空白
默认是到父元素边界按单词换行,如果 单词较长会超过父元素边界
取值:nowrap(不换行)
white-space:nowrap;
9. 单词换行:word-wrap
到容器边界设置换行方式
默认时单词没有空格不换行,甚至会超出指定宽度
属性值:
normal 默认值:到边界按单词截断换行
break-word :可以截断单词,当单词到了边界就 从边界字母处换行 inherit :继承父元素的white-space属性
word-wrap: break-word;
9.1 单词换行:word-break
处理文本到边界的换行方式
normal:默认值,到边界按单词截断换行
break-all: 到边界的字符开始截断
keep-all:不允许单词截断
inherit:继承父元素的word-break属性
10. 文字间距:letter-spacing
取值:数字+px、数字+em
letter-spacing: 5px;
letter-spacing: .5em;
11. 单词间距:word-spacing 和 字母转换 text-transform
word-spacing: 单词间距 单词间距,以空格区分单词,也就是空格的距离
text-transform: capitalize(首字母大写) uppercase(全转大写) lowercase(全转小写) none(默认);
/* 空格以10px分隔 */
word-spacing: 10px;
/* 将字母的首字符转成大写 */
text-transform: capitalize;
12. 行高:line-height
文字默认留上下半行间距,行高 = 2半行间距高度 + 文本高度
单位:px、em 、rem、百分比
行高连写 font:style weight size/line-hegiht family
13. 文字溢出: text-overflow
取值:clip(文字溢出剪切)、ellipsis(文字省略…)
注意点:
需要配合 white-space: nowrap; --文本不换行使用
还需搭配 overflow:hidden;
14. 文本排版方向:direction
需要设置unicode-bidi 为bidi-override;, direction样式才生效
rtl 从右往左排版
ltr 从左往右排版
.box {
direction: rtl;
unicode-bidi:bidi-override;
}
综上例子:
css代码:
<style>
.text {
width: 50px;
background-color: #096;
/* 文本在一行上显示 */
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
p {
font-size: 20px;
font-weight: 700;
/* 文字阴影 */
text-shadow: 2px 2px 3px palegreen;
/* 文字的间距 */
letter-spacing: 3px;
}
.span1 {
font-weight: 700;
/* 垂直显示 */
writing-mode: vertical-lr;
}
.span2 {
color: brown;
/* 垂直显示 汉字不会有效果*/
writing-mode: vertical-lr;
/* 将英文改成纵向 */
text-orientation: upright;
}
.word1 {
margin-bottom: 2px;
width: 60px;
background-color: #096;
}
.word2 {
width: 60px;
background-color: #096;
/* 到指定宽度直接换行 */
word-wrap: break-word;
}
.box {
width: 50px;
height: 100px;
background-color: palevioletred;
/* 行高 */
line-height: 100px;
}
</style>
HTML代码:
<body>
<div class="text">This is a text</div>
<p>This is a p</p>
<span class="span1">This is a span1标签</span>
<span class="span2">This is a span2标签</span>
<div class="word1">Thissssss isss a word</div>
<div class="word2">Thissssss isss a word</div>
<div class="box">111</div>
</body>
效果:
五、列表样式 list-style
列表样式控制,list-style写在ul是控制ul里面所 有的li标签,可以给单个li标签控制样式
ul li {
/* 设置ul列表的所有li标签的图标 */
list-style-type: circle;
/* 使用图片代替图标 */
list-style-image: url();
/* 图标在ul的位置(inside 在ul元素里面, outside在ul元素外面--默认) */
list-style-position: inside;
/* 简写 顺序是type,image,postion 没有的省 略 */
list-style:armenian url() inside;
}
六、背景
和img不同的是,background图片超出元素会自动裁剪,img超出元素会出现滚动条
1. 背景颜色:background-color
取值:rgb、rgba(a表示透明度)、十六进制、关键字、transparent(透明色)
注意点:
背景不影响盒子大小、并且能够看清盒子大小和位置、一般布局时候建议使用背景颜色
2. 背景图片:background-image
取值:url(路径)
注意点:
* 背景图片中url中可以省略引号
* 背景图片默认水平和垂直平铺
/* 背景图片 */
background-image: url(路径);
/* 引入多张图片,用 , 分隔*/
background-image: url() , url(),url()
3. 背景平铺:background-repeat
取值:repeat(平铺)、no-repeat(不平铺)、repeat-x(水平平铺)、repeat-y(垂直平铺)
/* 三个取值 */
background-repeat: no-repeat(不重复) repeat-x(X轴重复) repeat-y(Y轴重复);
4. 背景图位置:background-position
取值:x(水平)、y(垂直) —> 数字 + px、50%、vw、vh
x除了数字之外:left(左)、center(居中)、right(右)
y除了数字之外:top(上)、center(居中)、bottom(下)
/* 图片位置坐标 正数表示右移和下移 负数表示左移和上移*/
/* background-position: X轴的值 Y轴的值; */
background-position: 40% -30px;
background-position: right bottom;
5. 背景图的定位基轴:background-origin
background-origin 属性规定 background-position 属性相对于什么位置来定位
/* 默认值 从padding位置开始计算放置图片 */
background-origin: padding-box;
/* 从边框开始计算放置图片 */
background-origin: border-box;
/* 从内容位置开始计算放置图片 */
background-origin: content-box;
6.背景图的裁剪:background-clip
/* 背景图片裁剪 */
/* 内边距以内的背景图可见 */
background-clip: padding-box;
/* 内容区域的背景图可见 */
background-clip: content-box;
7. 背景图尺寸:background-size
/* 1.给具体的像素: 宽 高*/
background-size: 200px 100px;
/* 2.给百分比:宽 高 (父元素必须有宽高,会破坏原图比例)*/
background-size: 100% 100%;
/* 3.给系统值:
cover:把背景图像扩展至足够大,以使背景图完全覆盖背景区域 (会保证图片的比例)
contain:把图像图像扩展至最大尺寸,让图片完全显示在元素中(会保证图片的比例)
*/
background-size: cover;
background-size: contain;
8. 背景复合:background
背景属性复合写法(没有顺序要求),有的样式就写,没有的就省略
background: 颜色 地址 位置 平铺 滚动 ;
建议顺序:
background-color
background-image
background-postion/background-size[同时 有postion和size需要用/区分]
repeat
origin
clip
*背景颜色半透明:background: rgba(0,0,0,.3); (前三个参数为颜色值,最后一个为透明度)–0.3中0可省
/* 颜色 路径 X轴/大小 Y轴 不平铺 */
background: pink url() 5px/50px 15px no-repeat;
/* 引入多张背景图时用,分隔开: 路径 横坐标 纵坐标 不平铺*/
background: url() X Y no-repeat,
url() X Y no-repeat,
url() X Y no-repeat;
9. 实际应用
9. 1 全屏轮播图
全屏轮播图,一般宽度是1920px,当屏幕尺寸 在1920和网页设计宽度之间,网页就不能出现横 线滚动条,图片一般需要用背景图(背景图是自动 裁剪的)
9. 2 雪碧图
雪碧图: 如果网站有很多小图片,加载每个图 片都会发送一起图片请求,会影响网页加载速度。可以把所有的小图按一定的尺寸统一放在一 起,做成一张图片,一次请求就能把所有小图片加载完成。使用图片一般要用背景图定位
通过 background-position 去调整雪碧图的位置
七、元素显示模式
单位可以是 50px ,也可以基于父元素给百分比 50%,跟着浏览器窗口计算 50vw
1.块级元素(block)
块级元素的大小会基于父元素的大小去设置
显示特点:
- 独占一行(一行只能显示一个块级标签)
- 宽度默认是父元素的宽度,高度默认由内容撑开
- 可以设置宽高
代表标签:
div、p、pre、h1-h6、ul、li、dl、dt、dd、form、header…
注意:p,h1-h6等文字标签里不能放div标签
2.行内元素(inline)
行内元素大小都是自适应的
显示特点:
- 一行可以显示多个行内标签
- 宽度和高度默认由内容撑开
- 不可以设置宽高
代表标签:
a、span、b、u、i、s、strong、ins、sub、sup、em、del、mark…
注意:链接里面不能再放链接,但是 a 标签里面能放块级元素,给 a 转换成块级元素最安全
3.行内块元素(inline-block)
显示特点:
- 一行可以显示多个
- 可以设置宽高
代表标签:
img、 input、textarea、button、select…
特殊情况:img标签有行内块元素的特点,但是Chrome调试工具中显示结果是inline
元素显示模式转换
- display: block; 转换成块级元素
- display: inline-block; 转换成行内块元素
- display: inline 转换成行内元素
HTML 嵌套规范
- 块级元素一般作为大容器,可以嵌套:文本、块级元素、行内元素、行内块元素等等…
但是:p标签中不要嵌套div、p、h等块级元素 - a标签内部可以嵌套任意元素
但是:a标签不能嵌套a标签 - 行内元素、行内块元素一般作为被嵌套内容
居中方法
-
水平居中 :
文字: text-align: center
块级元素: margin: 0 auto; -
垂直居中 :
文字 line-height: 父级高度;
八、CSS的三大特征
1.继承性
特性:子元素默认继承父元素样式的特点(子承父业)
可以继承的常见属性(文字控制属性都可以继承)
- color
- font
- text-algin、text-indent…
- line-height
…
注意点:
- 可以通过调试工具判断样式是否可以继承
- a标签颜色一般不继承
- h系列标签font-size会继承无效
继承应用
好处:在一定程度上减少代码
场景:
- ul设置list-style:none属性,从而去除列表每一个li中默认的圆点样式
- 直接可以给body设置统一文字
2.层叠性
特性:
- 给同一个标签设置不同样式 —> 此时样式会叠加 —> 会共同作用在一个标签上
- 给同一个标签设置相同样式 —> 此时样式会覆盖 —> 最终写在后面的样式会覆盖前面的样式
注意点:
当样式冲突时,只有当选择器优先级相同时,才能通过层级判断出结果
3.CSS优先级
特性:不同选择器具有不同优先级,优先级高的选择器样式会覆盖优先级低的选择器样式
优先级判断:
继承 < 通配符选择器(*) < 标签选择器 < 类(class)选择器 < id选择器 < 行内样式 < js(javascript) < !important
注意点:
- !important 写在属性值的后面,分号的前面。
- !important不能给继承添加,只要是继承优先级最低
- 实际开发中不建议使用!important
权重的叠加计算
场景:如果是复合选择器,此时需要通过权重叠加计算方式,判断最终哪个选择器优先级最高
权重叠加:
行内样式个数 id选择器的个数 类选择器的个数 标签选择器的个数
优先级的权值相加
九、盒模型
盒子模型: html标签是可以嵌套的,可以把这种嵌套的标签看做是一个盒子,盒子里面可以装任何的内容(其他的元素)。可以把一个html标签 看做是一个盒子,盒子事件渲染的形状叫盒子模型。 网页本质上就是由不同的盒子拼凑出来的。
盒子模型 = 内容content + 内边距padding + 边框 border + 外边距margin 构成。
元素的真实尺寸 = content + padding + border
content内容的尺寸由width和height决定
块级元素:盒子模型的所有样式都有效
行内元素:不能设置content的尺寸,margin上下外边距无效,左右生效
1.内边距 padding
内容与盒子间的距离
padding:10px; - -四个边的距离一样
padding:10px 20px;- -上下 左右
padding:10px 20px 30px;- - 上 左右 下
padding:10px 20px 30px 40px ;- - 上 右 下 左
分开写法:padding-top/left/right/bottom:10px;
注意:会影响盒子实际大小,会撑大盒子 --需要计算去修改盒子大小
如果盒子本身没有指定 width/height 属性,此时 padding 会继承父元素的宽,不会撑开盒子大小 --如果写了宽度会撑开盒子实际宽度且高度就是padding上下值
解决方法:box-sizing: border-box(使padding的值在内部撑开)
2.外边距 margin
盒子与盒子之间的距离
margin:10px; - -四个边的距离一样
margin:0 auto;- -上下 左右 (auto是自适应)
margin:10px 20px 30px;- - 上 左右 下
margin:10px 20px 30px 40px ;- - 上 右 下 左
分开写法:margin-top/left/right/bottom:10px;
**注意几个特性:
1.上一个盒子的margin-bottom和下一个盒子的margin-bottom的距离会有重合(谁的值大采用谁的值)
2.行内元素的margin/padding上下值是失效的,左右正常显示
3.盒子嵌套塌陷问题:
如果父 子元素都有上外边距值,此时父元素会塌陷较大的外边距值,且子元素并不会有任何效果
解决方案:
1.可为父元素定义上边框 (border-top: 1px solid transparent;)
2.可为父元素定义内边距 (padding: 1px;)
3.可为父元素添加 overflow:hidden;(它不会改变盒子实际大小)
3.边框
3.1 内边框 border
盒子边框线
border-width:2px;- -边框粗细
border-style:solid(实线)/dashed(虚线)/dotted(点线);- - 边框样式
border-color:red;- - 边框颜色(默认黑色)
复合写法:border:1px solid red;- -粗细 样式 颜色
分开写法:borer-top/left/right/bottom:1px solid red;
3.2 table 的边框样式
另加:cellspacing=’0‘ 加在table上,
border-collapse: collapse; (表格的单元格合并) --合并相邻的边框,从2px变成1px
table {
width: 200px;
height: 100px;
border: 1px solid #ccc;
/* 允许边框重合的地方折叠 2px折叠成1px*/
border-collapse: collapse;
}
table td {
border: 1px solid #ccc;
}
3.3 外边框 outline(轮廓)
样式值和写法与border一致,但只能同时设置四周的样式,不能单独设置一边。用的较少,
outline: 10px solid green;
/* 偏移量:外边框离元素的距离 */
outline-offset: 10px;
4.box-sizing:border-box(重要)
计算盒子宽、高时候,不会让padding的内容把盒子撑开、border的外边框让盒子原样式变大
5.清除自带的默认样式
* {
margin:0;
padding:0;
}
h1,p,li...
{
margin:0;
padding:0;
}
6.文档流 / 标准流
1.从上到下布局
2.块级元素独占一行
3.行内元素或行内块元素,一行可多个布局
1.浮动 float
特性:
将块级元素一行显示,
会脱离文档流,会影响其它盒子的布局
解决办法:清除浮动
原因:
1. 在父盒子不方便给高度,但又因为子盒子浮动不占位置,父盒子高度会为0,会影响其他标准流盒子
2.清除浮动后,父盒子会根据浮动的子盒子自动检测高度,不会影响下面的标准流
3.如果父盒子有高度 则不需要清除浮动清除浮动方法:以下两种都可(clearfix加给父盒子)
/*父级添加 after伪元素 */
.clearfix:after {
/*内容*/
content: '';
/*元素属性变块级元素*/
display: block;
/*清除浮动*/
clear: both;
/*兼容处理 高度为0,可见属性隐藏*/
height: 0;
visibility: hidden;
}
/*兼容 IE6、7*/
.clearfix {
*zoom:1;
}
/* 父级添加 双伪元素*/
.clearfix:before,
.clearfix:after {
content: '';
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom:1;
}
float:left;- -左浮动(依次排序 123)
float:right;- -右浮动(反着排序321)
2.定位 position
元素定位 position,设置元素在文档流的位置关系。定位元素会脱离文档流(不影响其他元素)。标准文档流元素之间互相有影响。
1.静态定位:position:static;
2.相对定位:position:relative;
相对定位 以自己原来位置为参照进行边偏移,不会脱离文档流 会保留原有位置 会压住其他盒子
3.绝对定位:position:absolute;
绝对定位 会脱离文档流,不保留原有位置
绝对定位的定位是相对于有定位的父级元素(不包括static)移动。如果都没有定位,会参照浏览器定位。
.box1{
/* 添加relative相对定位,不给left和top不会影响元素位置
(这里添加relative目的是让子元素的决对定位是相对于当前元素)
如果用absolute 会让margin 失效。*/
position: relative;
margin: 0 auto;
width: 400px;
height: 400px;
background-color: #ccc;
}
.box1_1{
/* 绝对定位,相对于最近定位的上级元素位置变化 */
position: absolute;
top: 50px;
left: 50px;
}
4.固定定位:position:fixed;
固定定位 以浏览器可视窗口显示,不随滚动条移动而移动,会脱离文档流 不占有位置
注意:1.绝对定位和固定定位的层级相对较高
解决方法: z-index:1/10/100;
2.使用绝对定位和固定定位,需要设置宽高
5.粘性定位:position:sticky;
以浏览器可视窗口为参考点 会占有原先位置
(兼容性不太好) 必须添加 top,bottom,left,right 其中一个才能生效
top: 10px; --当元素被滚动条拉到离顶部10px开启粘性定位,继续拉滚动条也停留此位置
定位拓展:
拓展1:加了绝对定位的盒子不能通过 margin:0 auto;水平居中,但可通过小算法实线水平和垂直居中
水平 -->先让 left:50%;再margin-left:-盒子宽度的一半;
垂直 -->先让 top:50%;再margin-top:-盒子高度的一半;
/
拓展2:行内元素加了绝对定位或固定定位,可以直接设置宽高
块级元素加了绝对定位或固定定位,不给宽高 将会是内容大小
/
拓展3:浮动和绝对(固定)定位脱标的区别:
浮动只会压住下面标准流的盒子,但不会压住里面的文字和图片 --因为浮动有文字环绕效果
绝对(固定)定位会压住下面标准流盒子的文字和图片
3.层级问题
层级就是一种覆盖关系,在最上面的层级相对较高。
定位层级 > 浮动层级 > 普通元素层级
层级的更改: z-index:1/10/100;(无单位,且只有定位才能使用)
4.模块的隐藏和显示(隐藏并不是被删除了)
1.元素隐藏:
display:none;- -不占文档流
visibility:hidden; - - 占文档流
opacity:0;- -占文档流 透明度(0-1)
overflow:hidden;- -相对于文字的溢出隐藏
2.元素显示:
display:block;
visibility: visible;
opacity:1;
overflow:visible;
3.内容溢出:
overflow:hidden/visible/auto/scroll;
hidden:表示隐藏溢出部分
visible(默认):表示显示溢出部分
auto:溢出才显示滚动条不溢出不显示
scroll:内容溢出不溢出都显示滚动条
overflow-x: 控制水平方向的显示方案,属性值和overflow一样
overflow-x: hidden; 水平方向溢出隐藏
overflow-y: 控制垂直方向的显示方案,属性值和overflow一样
overflow-y: hidden; 垂直方向溢出隐藏
7. 调整textarea 尺寸
一般textarea不允许用户随意调整宽高,会影响网页布局
resize: none;
both 允许调整宽高 (默认)
none 不允许调整
horizontal 调整宽度
vertical 调整高度
resize: none;
十、CSS伪类
选择的内容需要在同一个父元素内部
1. :nth-child()
种类
li:first-child 第一个li标签
li:last-child 最后个li标签
li:nth-child(5) 选中第5个li标签
li:nth-last-child(2) 倒数第二个元素
nth-child(n)计算公式:
奇数:2n+1、2n-1、odd
偶数:2n、even
几倍:5n
找到前三个:-n+3
2. :nth-of-type( ) —更推荐使用
用法和计算同上
li:nth-of-type(5n) 选中li的5的倍数的元素
nth-of-type 与 nth-child 区别:
nth-child 需要找到对应的父元素 从第一个标签开始算,即使包含其他标签
nth-of-type 会根据父元素中 需要找到的标签去排序,即使还包含其他标签
十一、CSS伪元素
利用css创建新标签 不需要HTML标签
1. 常用的几个伪元素
::after 在元素之后添加内容
::before 在元素之前添加内容
::first-line 选中div内的第一行文本 在块级元素中生效
::first-letter 选择文本的首字符 在块级元素中生效
.test::before {
content: '❤';
}
.test::after {
content: '🐅';
}
/* ::first-line选中div内的第一行文本 在块级元素中生效 */
div::first-line {
color: pink;
}
/* ::first-letter选择文本的首字符 在块级元素中生效 */
div::first-letter {
color: green;
}
素材源:
炫酷特效素材网:
站长之家 https://sc.chinaz.com/jiaoben/220307477630.html
懒人图库 https://www.lanrentuku.com/ued/wd/6409.html