CSS
一.CSS的基本使用
1.认识CSS
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
作用:美化网页 。
2.使用CSS的好处
层叠:一层一层: 强调的是优先级。
样式表:很多的属性和属性值。
html使用标签把要操作的数据包裹起来,通过修改标签的属性值,来实现标签内数据的变化。
CSS将网页内容和显示样式 进行分离,提高了显示功能。
提取出html标签中的大部分属性,进行统一的管理。简化html网页代码结构,同时还可以对多个html网页进行统一管理。
3.CSS的基本使用
-
CSS基础语法格式
选择器{属性1:值1;属性2:值2}
原则: HTML代码 和 美颜(美化)样式 要分离。
选择器: 用来帮助HTML来进行CSS样式的使用。 必须放在 style 标签里面来使用 。style标签放在head头部分里面。
-
CSS的注释
// /* */
-
插入样式的3种方法
内联样式表(行内):样式写在标签上, style =" 属性名:属性值; …"
内部样式表(style中)
外部样式表:创建一个外部样式表,名为*.css。
- 在head中使用link元素引入样式表。link标签中rel:指定资源跟页面的关系,href:指定资源的地址。
- 通过@import导入。
优先级问题: 行内 > 内联 > 外部
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css"/> <style type="text/css"> .div2{ height: 50px; width: 50px; background: blue; } </style> <style type="text/css"> @import url("css/style.css"); </style> </head> <body> <div class="div1" style="background: red; height: 50px; width: 50px;">内联</div> <div class="div2" >内部</div> <div class="div3">外部</div> </body> </html> <!--css包下的style.css文件中--> .div3{ width: 50px; height: 50px; background: green; }
4.css中颜色的表示
主要方法
颜色是通过对红、绿和蓝光的组合来显示的。早期的电脑只支持最多 256 种颜色时,但是现在大多数电脑都能显示数百万种颜色。
-
颜色名称(单词表示法):red;blue;green;yellow…
- 优点:方便快捷而且特定颜色比较准确
- 缺点:表示颜色数量有限,英文不好的不容易记住,不支持透明度的表示
-
十六进制方式(十六进制表示法(09,af):#000000~#ffffff)
- 优点:表示颜色种类多,使用较方便
- 缺点:不支持透明颜色。
-
RGB方式 三原色配色方式:rgb(0,0,0)范围:0~255
- 优点:表示颜色种类多,使用较方便
- 缺点:不支持透明颜色。
CSS3新增的颜色表示方法
-
RGBA方式三原色配色方式
在RGB模式上新增了Alpha透明度。(0-1之间的值)。rgba(255,235,30.0.5)
-
HSL模式
语法:HSL(H,S,L),HSL分别表示色调,饱和度,亮度
-
H:0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色。取值为:0 - 360
-
S:(饱和度)。取值为:0.0% - 100.0%
-
L:(亮度)。取值为:0.0% - 100.0%
-
-
HSLA模式
HSL模式上新增了Alpha透明度。
二.CSS的选择器
常用选择器
通用选择器
*
,表示所有的元素。
*{color:red;}
标签(元素)选择器
使用标签来进行样式的美化,如:p{color:red;}
语法 :
标签名 {
属性名 : 属性值;
...
}
class选择器 (类)
在标签上添加 class属性,然后在style里面写选择器 (. 开头),更加精确的去控制样式。class名可以有多个。
语法 :
.class属性名 {
属性名:属性值;
...
}
class="属性名"
id选择器
在同一个页面,id是不能重复的,只能给唯一的一个标签使用。
语法 :
#id属性名 {
属性名 : 属性值;
...
}
id="属性名"
- 优先级问题: id > class > 标签 >*
属性选择器
- 元素名[属性名]:选择具有属性名的元素。
p[title][name]{color:red;}
- 属性和值选择器
[title="coydone"]{border:5px solid blue;}
- 属性和值选择器 - 多个值
input[style~="15px"]{background:red;}
- 带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值:
[lang|="en"] { color:red; }
选择器 | 描述 |
---|---|
[attribute] | 用于选取带有指定属性的元素。 |
[attribute=value] | 用于选取带有指定属性和值的元素。 |
[attribute~=value] | 用于选取属性值中包含指定词汇的元素。 |
[attribute|=value] | 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。 |
[attribute^=value] | 匹配属性值以指定值开头的每个元素。 |
[attribute$=value] | 匹配属性值以指定值结尾的每个元素。 |
[attribute*=value] | 匹配属性值中包含指定值的每个元素。 |
关系选择器
两个或者两个以上的基础选择器通过不同的方式连接在一起。
-
后代选择器 : 找到指定标签的所有特定的后代标签,设置属性
选择器1 选择器2 ...{ 属性:值; }
注意点:
1.后代选择器必须用空格隔开2.后代选择器可以通过空格一直延续下去
-
子元素选择器:找到指定标签中所有特定的直接子元素,然后设置属性
选择器1 > 选择器2{ 属性:值; }
-
并集选择器:将同一个样式作用于更多的元素
选择器1,选择器2,选择器3….{ 属性:值; 属性:值; }
-
交集选择器:更加精准的定位某一个标签,即要满足选择了标签还要满足选择类(ID)选择器。
标签类(ID)选择器名称{ 属性:值; 属性:值; }
注意:交集选择器之间,不能写任何空格,符号,一定要紧挨着一起。
-
相邻兄弟选择器: 选取紧邻某元素之后的同辈元素
选择器1+选择器2{ 属性:值; }
-
兄弟选择器: 选取某元素之后所有的同辈元素
选择器1~选择器2{ 属性:值; }
记法: 空格 大家浪
-
伪元素选择器
选择器 描述 元素:first-letter/元素::first-letter 设置元素内的第一个字符的样式 元素:first-line/元素::first-line 设置元素内的第一行的样式 元素:before/元素::before 在每个元素的内容之前插入内容。和content属性一起使用。 a::before{content:"点击"}
元素:after/元素::after 在每个元素的内容之后插入内容。和content属性一起使用。 a::after{content:"点击"}
元素::selection 设置对象被选择时的颜色
伪类选择器
结构伪类选择器
-
E:first-child 父元素的第一个子元素E。
ul>li:first-child{}
-
:root:选择文档的根元素。即
<html>
元素。 -
E:last-child:最后一个子元素E。
-
E:only-child:仅有的一个子元素E。
-
E:only-of-type:只有一种类型的子元素。
-
E:nth-child(n):匹配父元素的第n个子元素E。
- 可以直接用数值:比如2
- 可以用奇数(odd)偶数(even)
- 可以用公式,比如:3n
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> table{height: 300px;width: 500px;} tr:nth-child(even){background-color: coral} tr:nth-child(odd){background-color:burlywood} </style> </head> <body> <table border="1" cellspacing="0" cellpadding="0"> <tr><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td><td></td></tr> </table> </body> </html>
-
E:nth-last-child(n):匹配父元素的倒数第n个子元素E。
-
E:first-of-type :匹配同类型中的第一个同级元素E。
-
E:last-of-type:匹配同类型中的最后一个同级元素E。
-
E:nth-of-type(n):匹配同类型中的第n个同级兄弟元素E。
-
E:nth-last-of-type(n):匹配同类型中的倒数第n个同级兄弟元素E。
-
E:empty :匹配没有任何子元素(包括text节点)的元素E。
UI伪类选择器
E:active 向被激活的元素添加样式。当鼠标按下去不松开的时候的样式。
E:hover 当鼠标悬浮在元素上方时,向元素添加样式。当鼠标滑入的时候的样式
E:link 向未被访问的链接添加样式。当鼠标正常状态的时候的样式。
E:visited 向已被访问的链接添加样式。当鼠标松开移除的时候的样式。只能改颜色,不能改其他属性, 浏览器的限制。
E:focus 向拥有键盘输入焦点的元素添加样式。
E:lang向带有指定 lang 属性的元素添加样式。
标签名: link {属性名:属性值;}
p:lang(en){color:red}
<p lang="en">html</p>
设置状态的顺序: link — visited – hover — active
其他选择器
input:checked 选择每个被选中的input元素。
input:disabled 选择每个禁用的input元素
input:enabled 选择每个启用的input元素。
E:target 选择当前活动的元素(某个被链接的元素)。
:not(E) 选择E元素之外的每个元素。
CSS优先级
-
相同样式优先级
-
当设置相同样式时,后面的优先级较高,但不建议出现重复设置样式的情况。
-
内部样式与外部样式
-
内部样式与外部样式优先级相同,如果都设置了相同的样式,那么后写的引入样式优先级高。
-
单一样式优先级
- style行间>id>class>标签>*>继承
style行间,权重1000;id:100;class:10;标签:1。
比较优先级按权重比较,权重相加。
-
!important
:提升样式优先级,非规范方式,不建议使用。权重最大。 -
*{color green !important;}
-
标签+类>单类
-
群组优先级:与单一选择器的优先级相同,靠后写的优先级高。
三.CSS的常用属性
字体
属性 | 描述 |
---|---|
font | 简写属性。作用是把所有针对字体的属性设置在一个声明中。font:italic bold 36px "宋体"; 顺序:font-style/font-variant/font-weight/font-size/font-family 最少要有两个值:size、family,且这两个值按顺序排在最后。 |
font-family | 设置字体系列。宋体,微软雅黑。。。font-family:"宋体"; |
font-size | 设置字体的尺寸。font-size:12px; |
font-style | 设置字体风格。normal:标准样式;italic:斜体样式;oblique:倾斜样式。font-style:italic; |
font-variant | 以小型大写字体(small-caps)或者正常字体(normal)显示文本。 |
font-weight | 设置字体的粗细。normal:默认值,标准字体;bold:粗体;bolder:更粗;lighter:更细;100,200,300,…900:由细到粗,400=normal,700=bold。font-weight:bold; |
font:weight style size/line-height family;
font:bold italic 30px/100px 宋体;
如果非要混合去写的话,那么要先写复合样式,再写单一样式。这样样式才不会被覆盖掉。
- italic:斜体样式;带有倾斜属性的字体的才可以设置。
- oblique:倾斜样式;没有倾斜属性的字体也可以设置。
font-size属性取值 | 字体大小 |
---|---|
xx-small | 最小 |
x-small | 较小 |
small | 小 |
medium | 正常(默认值) |
large | 大 |
x-large | 较大 |
xx-large | 最大 |
文本
主要
属性 | 描述 |
---|---|
color | 设置文本颜色 |
direction | 设置文本方向。 |
line-height | 设置行高。 normal/数字/百分比/px/em。 注意:与div的高度设置一致,效果使文字垂直居中。 |
letter-spacing | 设置字符间距。 |
text-align | 对齐元素中的文本。left/right/center/justify:两端对齐 |
text-decoration | 向文本添加修饰。underline: 下划线;overline:上划线;none没有线;line-through:删除线;blink:闪烁的文本。 |
text-indent | 缩进元素中文本的首行。px/%/em。一般用在段落标记<p>``text-indent:2em; em单位:相对单位,1em永远都是跟字体大小相同。 |
text-shadow | 设置文本阴影。CSS2 包含该属性,但是 CSS2.1 没有保留该属性。 |
text-transform | 控制元素中的字母。文本的大小写。none默认/capitalize大写开头/uppercase转换大写/lowercase转换为小写 |
unicode-bidi | 设置文本方向。 |
white-space | 设置元素中空白的处理方式。 |
word-spacing | 增加或减少字与字之间的空白。主要针对英文。normal/px |
text-shadow:水平偏移量/竖直偏移/模糊距离/颜色
text-shadow:5px 5px 3px black;
值 | 描述 |
---|---|
h-shadow | 必需。水平阴影的位置。允许负值。 |
v-shadow | 必需。垂直阴影的位置。允许负值。 |
blur | 可选。模糊的距离。 |
color | 可选。阴影的颜色。 |
-
英文和数字不自动折行时:
- work-break:break-all;(非常强烈的折行)
- work-wrap:break-word;(不是那么强烈的折行,会产生一些空白区域)
-
white-space 设置元素中空白的处理方式。
- normal 默认。空白会被浏览器忽略
- pre 空白会被浏览器保留。其行为方式类似 HTML 中的pre标签。
- nowrap 文本不会换行,文本会在在同一行上继续,直到遇到br标签为止。
- pre-wrap 保留空白符,但是正常地进行换行。
- pre-line 合并空白符,但是正常地进行换行。
-
direction 设置文本方向
-
ltr默认。文本方向从左到右。/rtl 文本方向从右到左。
-
text-wrap 规定文本的换行规则。
-
word-break 规定非中日韩文本的换行规则。
-
word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。
-
text-fill-color 文本填充颜色,指定文字填充部分的颜色
-
text-stroke 文本边框颜色,指定文字描边部分的颜色
- text-stroke-width文字的描边宽度
- text-stroke-color文字的描边颜色
- 备注:使用该属性需要使用浏览器私有前缀
-
text-overflow 规定当文本溢出包含元素时发生的事情。
-
text-overflow 设置是否使用一个省略标记(…)标示对象内文本的溢出
- clip: 默认值当对象内文本溢出时不显示省略标记(…),而是将 溢出的部分裁切掉。
- ellipsis:当对象内文本溢出时显示省略标记(…)。
- 注意:该属性需要和over-flow:hidden属性、white-space:nowrap配合使用
了解
-
text-outline 规定文本的轮廓
-
text-justify 规定当 text-align 设置为 “justify” 时所使用的对齐方法。
-
text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。
-
text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。
-
unicode-bidi 用于同一个页面里存在从不同方向读进的文本显示。与direction属性一起使用。不常用,了解即可
- normal/embed/bidi-override
-
hanging-punctuation 规定标点字符是否位于线框之外。
-
punctuation-trim 规定是否对标点字符进行修剪。
-
tab-size:设定一个tab在页面中的显示长度
-
text-wrap 规定文本的换行规则。注释:目前主流浏览器都不支持 text-wrap 属性。
CSS3前缀
- CSS3目前很多新增属性尚未被W3C列为标准,对这些暂时未被公布为标准的属性,各家浏览器会在属性前加上前缀词,也将其称之为浏览器的私有前缀。
- W3C官方认为试验阶段的属性仅为了测试,未来可能修改或删除。
现在主要流行的浏览器内核有:
- Webkit内核:产要代表为Chrome和Safari
- Trident内核:主要代表为IE浏览器
- Gecko内核:主要代表为Firefox
- Presto内核:主要代表为Opera
- 手机等移动端一般是IOS和安卓系统,基本上采用的都是webkit引擎。
浏览器的私有前缀:
- Webkit内核:前缀为-webkit-
- Trident内核:前缀为-ms-
- Gecko内核:前缀为-moz-
- Presto内核:前缀为-o-
h1{
text-stroke:2px red;
-webkit-text-stroke:2px red;
}
CSS继承
文字相关的样式可以被继承
布局相关的样式不能被继承(默认是不能继承的,但是可以设置继承属性,inherit值)
p{border:inherit;}
边框
元素的边框就是围绕元素内容和内边距的一条或多条线
元素的边框属性:
-
border:简写属性,用于把针对四个边的属性设置在一个声明。
border:1px solid red;
-
border-width:简写属性,用于为元素的所有边框设置宽度,或者单独地为各边框设置宽度。
常用单位为:像素(px)、em。em单位:相对单位,1em永远都是跟字体大小相同。
- thin细的边框/medium默认/thick粗的边框。
-
border-style:用于设置元素所有边框的样式,或者单独地为各边框设置样式。
none:无边框;dotted:点状边框;dashed:虚线;solid:实线;double:双线(边框要大于3px);groove:3D凹槽边框;ridge:3D垄状边框;insert:3D insert边框;outset:3D outset边框。
-
border-color:简写属性,设置元素的所有边框中可见部分的颜色,或为4个边分别设置颜色。
-
border-bottom 简写属性,用于把下边框的所有属性设置到一个声明中。
- border-bottom-color 设置元素的下边框的颜色。
- border-bottom-style 设置元素的下边框的样式。
- border-bottom-width 设置元素的下边框的宽度。
-
border-left 简写属性,用于把左边框的所有属性设置到一个声明中。
- border-left-color 设置元素的左边框的颜色。
- border-left-style 设置元素的左边框的样式。
- border-left-width 设置元素的左边框的宽度。
-
border-right 简写属性,用于把右边框的所有属性设置到一个声明中。
- border-right-color 设置元素的右边框的颜色。
- border-right-style 设置元素的右边框的样式。
- border-right-width 设置元素的右边框的宽度。
-
border-top 简写属性,用于把上边框的所有属性设置到一个声明中。
- border-top-color 设置元素的上边框的颜色。
- border-top-style 设置元素的上边框的样式。
- border-top-width 设置元素的上边框的宽度。
边框实现三角形
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三角形</title>
<style type="text/css">
/*transparent透明的*/
div{
height: 0px;
width: 0px;
border-top:150px solid red ;
border-bottom:150px solid transparent ;
border-left:150px solid transparent;
border-right:150px solid transparent ;
}
</style>
</head>
<body>
<div id=""></div>
</body>
</html>
CSS3新增的边框属性
border-radius
-
border-radius 设置所有四个 border-radius 属性的简写属性。
-
*同时设定四个角的圆角
-
** 分别设定左上 右下、左下 右上圆角
-
*** 分别设定左上 、左下 右上、右下圆角
-
****
分别设定左上 、右上、右下、左下圆角- border-top-left-radius 左上角圆角边框
- border-top-right-radius 右上角圆角边框
- border-bottom-right-radius 右下角圆角边框
- border-bottom-left-radius 左下角圆角边框
<style type="text/css">
#box{width: 200px;height: 200px;border-radius: 50px;background: red;}
</style>
<div id="box"></div>
当border-radius
为宽高的一半时,即border-radius=50%
时,会变成一个圆。
border-image
-
border-image 设置所有 border-image属性的简写属性。
-
border-image 复合属性,设置边框使用图像来填充,可依次设置一下属性:
- border-image-source 图像来源路径
- border-image-slice 边框背景图的分割方式
- border-image-width 边框的宽度。
- border-image-outset 边框背景图的扩展(边框图像区域超出边框的量。)
- border-image-repeat 边框图像的平铺方式:stretch拉伸/repeat重复铺满/round重复铺满并对图片进行调整
box-shadow
-
box-shadow 向方框添加一个或多个阴影。
-
none: 无阴影
-
阴影水平偏移值/阴影垂直偏移值/阴影模糊值/阴影外延值/阴影的颜色/inset内阴影(默认值为outset)
-
h-shadow:必要参数,阴影水平的偏移距离。
-
v-shadow:必要参数,阴影垂直的偏移距离。
-
blur:模糊距离
-
spread:阴影尺寸
-
color:阴影颜色
-
insert:可选参数,不写就是默认外阴影,写就是内阴影。
div{box-shadow: 0px 0px 1px 5px rgb(255,0,0), 0px 0px 1px 10px rgb(255,255,0), 0px 0px 1px 15px rgb(200,100,0); }
-
背景
属性 | 描述 |
---|---|
background | 简写属性,作用是将背景属性设置在一个声明中。 |
background-attachment | 背景图像是否固定或者随着页面的其余部分滚动。scroll:默认值,滚动(背景位置按照当前元素进行偏移)。fixed:固定不动。(背景位置按照浏览器进行偏移) |
background-color | 设置元素的背景颜色。 |
background-image | 把图像设置为背景。url(背景地址) ,默认会水平垂直都铺满背景图 |
background-position | 设置背景图像的起始位置。x y:数字(px、%)|单词。x:left、center、right;y:top、center、bottom。 |
background-repeat | 设置背景图像是否及如何重复。repeat-x:x轴平铺;repeat-y:y轴平铺;repeat:x,y轴都平铺,默认值;no-repeat:不平铺; |
CSS3新增的背景属性
-
background-size规定背景图片的尺寸。
- 像素|百分比设置宽高
- cover:把背景图片扩展至足够大,以使背景图片完全覆盖背景区域。
- contain:把图像扩展至最大尺寸(保证图片的完整性),以使其宽度和高度完全适应内容区域。
-
background-clip:规定背景的绘制区域。
- border-box:背景被裁剪到边框盒。
- padding-box:背景被裁剪到内边距盒。
- content-box:背景被裁剪到内容框。
-
background-origin:规定背景图片的定位区域。
- padding-box:背景图像相对于内边距框来定位。
- border-box:背景图像相对于边框盒来定位。
- content-box:背景图像相对于内容框来定位。
background-color:green;
background-image:url(../img/p.jpg);
background-repeat:repeat-y;
/*可以简写为:*/
background:url(../img/p.jpg) repeat-y green;(无先后顺序)
/*********************/
div{background:red url(../img/p.jpg) no-repeat center center;}
表格和列表
表格的属性
- border-collapse 设置是否把表格边框合并为单一的边框.属性值:separate 默认值/collapse边框合并。
- border-spacing 设置分隔单元格边框的距离。
- caption-side 设置表格标题的位置。属性值:top 默认值,在表格之上。bottom 在表格之下。
- empty-cells 设置是否显示表格中的空单元格。属性值:hide/show默认。
- table-layout 设置显示宽度是否随内容拉伸。属性值:auto默认/fixed。 列宽由表格宽度和列宽度设定。
列表的属性
-
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中。
-
list-style-type 设置列表项标志的类型。
- none无标记。/disc默认,实心圆。/circle 标记是空心圆。/square实心方块。/
- decimal 数字。/decimal-leading-zero 0开头的数字/lower-roman 小写罗马数字upper-roman 大写罗马数字/lower-alpha 小写英文字母/upper-alpha大写英文字母
- …日文、拉丁文等其他符合,有兴趣自己查CSS手册。
-
list-style-position 设置列表项标志的位置。属性值:inside/outside默认值
-
list-style-image 将图象设置为列表项标志。属性值:URL 图像的路径。/none 默认。无图形被显示。
标签分类
按类型
-
block(块):div、p、ul、li、h1。。。
独占一行;支持所有样式;不写宽的时候,和父元素的宽相同;所占区域是一个矩形。
-
inline(内联):span、a、em、strong、img。。。
挨在一起;有些样式不支持,例如:width、height、margin、padding;不写宽的时候,宽度由内容决定;所占的区域不一定是矩形。内联标签之间会有空隙,原因:代码换行产生的。
<span>内容</span><span>内容</span>
<span>内容</span>
<span>内容</span>
- inline-block(内联块):input、select。。。同时具有块和内联的属性,如:挨在一起,支持宽高。
块标签能够嵌套内联
块不一定能嵌套块,特殊:p只能嵌套内联
内联不能嵌套块,a标签是一个例外。但a不能嵌套a。
按内容
Flow:流内容。网页中能够感知到的一些标签
Metadata:元数据。如网页的编码,meta、style、link。
Sectioning:分区。如section、nav
Heading:标题。如:h1~h6
Phrasing:措辞。一般为内联标签。如:strong、em
Embedded:嵌入的。如:img、audeo、video、canvas、svg。
Interactive:互动的。如:input框。
按显示
-
替换元素:浏览器根据元素的标签和属性,来决定元素的具体显示内容。
-
非替换元素:将内容直接告诉浏览器,将其显示出来。
<!--替换元素-->
<input type="text" />
<!--非替换元素-->
<h1>标题</h1>
四. 盒子模型
盒子模型的概念
- CSS 盒模型规定了处理元素内容(content)、内边距(padding)、边框 (border)和 外边距 (margin)的方式。
- 最内部分是元素内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距。
组成:content(物品)–>padding(填充物)–>border(包装盒)–>margin(盒子与盒子之间的间距)
content:内容区域,width和height组成的。
注:背景颜色会填充到margin以内的区域,文字会在content区域,padding不能出现负值,margin可以出现负值。
元素的尺寸
百分比是以父容器的大小换算的。
- height 设置元素的高度。属性值:auto:默认。/px、cm 等单位定义高度。/百分比
- width 设置元素的宽度属性值:auto:默认。/px、cm 等单位定义高度。/百分比
- max-height 设置元素的最大高度。属性值:auto:默认。/px、cm 等单位定义高度。/百分比。
- max-width 设置元素的最大宽度。属性值:auto:默认。/px、cm 等单位定义高度。/百分比。
- min-height 设置元素的最小高度。属性值:auto:默认。/px、cm 等单位定义高度。/百分比。
- min-width 设置元素的最小宽度。属性值:auto:默认。/px、cm 等单位定义高度。/百分比。
- 当属性值用百分比时是相对于父元素的尺寸来说的。
- 最大最小宽高主要用于动态控制缩放等情况下,暂做了解。
padding 属性
元素的内边距
-
padding-top 属性设置元素的上内边距(空间)。
-
padding-right 属性设置元素右内边距(空白)。
-
padding-bottom 属性设置元素的下内边距(底部空白)。
-
padding-left 属性设置元素左内边距(空白)。
-
padding 属性接受长度值或百分比值,但不允许使用负值。
- padding * 同时设定四个边距
- padding ** 分别设定上下、左右边距
- padding *** 分别设定上、左右、下边距
- padding
****
分别设定上、右、下、左边距
border属性
元素的边框,是围绕元素内容和内边距的一条或多条线
-
border属性:
-
可以按顺序设置如下属性:
-
border-width
-
border-style
- solid 定义实线。/dotted 定义点状边框/double 定义双线…
-
border-color
-
margin 属性
元素的外边距
-
围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
-
margin-top 属性设置元素的上外边距(空间)。
-
margin-right 属性设置元素外内边距(空白)。
-
margin-bottom 属性设置元素的下外边距(底部空白)。
-
margin-left 属性设置元素左外边距(空白)。
-
margin 属性接受长度值或百分比值,允许使用负值。
- margin * 同时设定四个外边距
- margin ** 分别设定上下、左右外边距
- margin *** 分别设定上、左右、下外边距
- margin
****
分别设定上、右、下、左(顺时针顺序)外边距
box-sizing
box-sizing属性允许以特定的方式定义匹配某个区域的特定元素。取值为content-box(默认值)|border-box。
盒尺寸,可以改变盒子模型的展示形态。
原本默认值:width、height--->content
改变box-sizing:width、height--->content padding border
/*边框不占盒子空间*/
#box{
width:200px;height:200px;
padding:30px 50px;
box-sizing:border-box;
}
盒子模型的一些问题
- margin叠加问题,出现在上下margin同时存在的时候。会取上下值较大的作为叠加的值。这个问题,只有上下有,左右是没有这个叠加问题的。
#box1{
width: 200px;height: 200px;background-color: red;
margin-bottom: 30px;
}
#box2{
width: 200px;height: 200px;background-color: blue;
margin-top: 10px;
}
<div id="box1"></div>
<div id="box2"></div>
解决方案:BFC规范。想办法只给一个元素添加间距。
- margin传递问题,出现在嵌套的结构中,只是针对margin-top。
#box1{
width: 200px;height: 200px;background-color: red;
}
#box2{
width: 100px;height: 100px;background-color: blue;
margin-top: 30px;
}
<div id="box1">
<div id="box2"></div>
</div>
解决方案:BFC规范。给父容器添加边框。。margin换成padding。
#box1{
width: 200px;height: 200px;background-color: red;
border: 1px solid red;
}
#box2{
width: 100px;height: 100px;background-color: blue;
margin-top: 30px;
}
- div在浏览器中居中:
margin:0 auto;
auto表示自适应。 - width、height不设置的时候,对盒子模型的影响,会自动去计算容器的大小,节省代码。
溢出的处理
-
overflow 如果内容溢出了元素内容区域,是否对内容的边缘进行裁剪。
-
overflow-x 如果内容溢出了元素内容区域,是否对内容的左/右边缘进行裁剪。
-
overflow-y 如果内容溢出了元素内容区域,是否对内容的上/下边缘进行裁剪。
- visible 不裁剪内容,可能会显示在内容框之外。
- hidden 裁剪内容 - 不提供滚动机制。
- scroll 裁剪内容 - 提供滚动机制。
- auto 如果溢出框,则应该提供滚动机制。
五. 浮动
普通文档流 : 将窗体自上而下分成一行一行,并在每行中按从左至右的挨次排放元素。文档流是文档中可显示对象在排列时所占用的位置。
浮动:加浮动的元素,会脱离文档流,会延迟父容器靠左或靠右排列,如果之前已经有浮动的元素,会挨着浮动的元素进行排列。
就是让元素脱离普通文档流,类似飘起来了。
- float注意点
- 只会影响后面的元素,内容会提升半层
- 默认宽根据内容决定
- 换行排列
- 主要给元素添加,但也可以给内联元素添加。
属性: float : left : 左浮动 right:右浮动 none:不浮动
-
float 浮动:定义元素在哪个方向浮动。
- left 元素向左浮动。
- right 元素向右浮动。
- none 默认值。元素不浮动,并会显示其在文本中出现的位置。
-
clear 浮动的清除:常用属性值 both/left/right/none
上下排列:clear属性,表示清除浮动的,left/right/both
<style type="text/css"> #box1{width: 100px;height: 100px;background: red;float: left;} #box2{width: 200px;height: 200px;background: blue;clear: left;} </style> <div id="box1"></div> <div id="box2"></div>
嵌套排列
<style type="text/css"> #box1{width: 200px;border: 1px solid red;} #box2{width: 100px;height: 100px;background: blue;float: left;} </style> <div id="box1"> <div id="box2"></div> </div> aaaaa
-
固定宽高:不推荐,不能把高度固定死,不适合做自适应的效果。
#box1{width: 200px;height:100px;border: 1px solid red;} #box2{width: 100px;height: 100px;background: blue;float: left;}
-
父元素浮动:不推荐,因为父容器浮动也会影响到后面的元素。
-
overflow:hidden(BFC规范),如果有子元素想溢出,那么会受到影响。
#box1{width: 200px;border: 1px solid red;overflow: hidden;} #box2{width: 100px;height: 100px;background: blue;float: left;}
-
display:inline-block(BFC规范),不推荐,父容器会影响到后面的元素。
-
设置空标签:不推荐,会多添加一个标签。
<style type="text/css"> #box1{width: 200px;border: 1px solid red;} #box2{width: 100px;height: 100px;background: blue;float: left;} .clear{clear: both;} </style> <div id="box1"> <div id="box2"></div> <div class="clear"></div> </div> aaaaa
-
after伪类:推荐,是空标签的加强版,目前各大公司的做法。
- (clear属性只会操作块标签,对内联标签不起作用)
<style type="text/css"> #box1{width: 200px;border: 1px solid red;} #box2{width: 100px;height: 100px;background: blue;float: left;} .clear:after{content: "";clear: both;display: block;} </style> <div id="box1" class="clear"> <div id="box2"></div> </div> aaaaa
六. 定位
CSS定位的概念
定位: 是除了浮动之外,另一种为元素定位的方式。
-
CSS 定位属性允许对元素进行定位改变其在页面的位置。
-
CSS 有三种基本的定位机制:普通流、浮动和绝对定位。
-
普通定位:是浏览器默认的定位方式,即浏览器自动将所有元素按正常出现顺序显示。
-
绝对定位:以网页坐标系为基准定位。(以网页的左上角为坐标系基准来定位)。绝对定位 也是脱离了文档流。
-
相对定位:即相对本来正常的位置定位。
-
-
普通流中的元素的位置由元素在HTML中的位置决定。
元素定位的属性
-
position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。用于指定一个元素在文档中的定位方式。top、right、bottom、left属性则决定了该元素的最终位置。
-
static 默认值。没有定位。
-
absolute 绝对定位,相对于(static 定位以外的第一个) 父元素进行定位。通过绝对定位,元素可以放置到页面上的任何位置。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。(注:static 定位以外的第一个父元素:相对与最接近的一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,则依据 body 对象左上角作为参考进行定位。)
-
使元素完全脱离文档流
-
使内联元素支持宽高(让内联具备块特征)
-
使块元素默认宽根据内容决定(让块具备内联的特征)
-
如果有定位祖先元素相对于定位祖先元素发生偏移,没有定位祖先元素相对于整个文档发生偏移。
-
-
relative 相对定位,相对于其正常位置进行定位。如果没有定位偏移量,对元素本身没有任何影响。不使元素脱离文档流。不影响其他元素布局。元素的位置通过 left, top,right以及bottom属性进行规定。相对于当前元素进行偏移。
<style type="text/css"> #box1{width: 100px;height:100px;background: red;} #box2{width: 100px;height:100px;background: blue;position: relative;left: 100px;top: 100px;} #box3{width: 100px;height:100px;background: green;} </style> <div id="box1"></div> <div id="box2"></div> <div id="box3"></div>
-
-
fixed 固定定位,相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。(主要用于返回顶部的按钮和弹窗)
-
sticky 黏性定位。在指定的位置,进行黏性操作。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{height: 2000px;} div{background-color: red;position: sticky;top: 0;} </style> </head> <body> <p>段落内容</p><p>段落内容</p> <p>段落内容</p><p>段落内容</p> <p>段落内容</p><p>段落内容</p> <p>段落内容</p><p>段落内容</p> <div><p>段落内容</p></div> <p>段落内容</p><p>段落内容</p> <p>段落内容</p><p>段落内容</p> <p>段落内容</p><p>段落内容</p> <p>段落内容</p><p>段落内容</p> <p>段落内容</p><p>段落内容</p> </body> </html>
-
绝对定位和相对定位的区别(子绝父相)
- 绝对定位对象可以层叠,相对定位的对象不可以
- 相对定位对象会占据它原来位置,绝对定位不会
-
top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。注:如果 “position” 属性的值为 “static”,那么设置 “top” 属性不会产生任何效果。
-
right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。注:如果 “position” 属性的值为 “static”,那么设置 “right” 属性不会产生任何效果。
-
bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。注:如果 “position” 属性的值为 “static”,那么设置 “bottom” 属性不会产生任何效果。
-
left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。注:如果 “position” 属性的值为 “static”,那么设置 “left” 属性不会产生任何效果。
-
clip 设置元素的形状。元素被剪入这个形状之中,然后显示出来。
-
vertical-align 设置元素的垂直对齐方式。
-
z-index 设置元素的堆叠顺序。默认为0。值大的在上面。
嵌套时候的层级问题。
<style type="text/css"> #box1{width: 100px;height: 100px;background: red;position: absolute;z-index: 0;} #box2{width: 100px;height: 100px;background: blue;position: absolute;left:50px;top:50px;z-index:2;} </style> <div id="box1"> <div id="box2"></div> </div>
- overflow 设置当元素的内容溢出其区域时发生的事情。
定位实现居中和装饰点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{width: 300px;height: 300px;border: 1px solid black;position: relative;}
#box2{width: 100px;height: 100px;background: blue;position: absolute;left:50%;top:50%;margin:-50px 0 0 -50px;}
</style>
</head>
<body>
<div id="box1">
<div id="box2"></div>
</div>
</body>
</html>