CSS学习笔记从零开始
- 代码风格
-
- 样式书写格式
- CSS基础选择器
-
- css选择器的作用:(选择标签用的)
- 选择器分类:基础选择器和复合选择器
-
- 基础选择器
-
- 标签选择器
- 类选择器 - 开发最常用
-
- 多类名
- id选择器(一次性)
- 通配符选择器
- css复合选择器
-
- 后代选择器(重要)
- 子元素选择器(重要)
- 并集选择器(特殊效果)
- 链接伪类选择器(LVHA)
- :focus 伪类选择器(表单元素)
- CSS字体属性
-
- font-family设置字体系列
- font-size设置字体大小
- font-weight字体粗细
- font-style字体样式
- font复合属性写法
- CSS文本属性
-
- 文本颜色color
- 对齐文本text-align
- 文本装饰text-decoration
- 文本缩进text-indent
- 行间距line-height
- CSS的引入方式
-
- 内部样式表
- 行内样式表
- 外部样式表
- CSS元素显示模式
-
- 块元素
- 行内元素
- 行内块元素
- 显示模式的转换
- 背景
-
- 背景颜色
- 背景图片
- 背景平铺
- 背景方位
- 背景像素固定(背景附着)
- 背景复合属性写法
- 盒子模型
-
- border边框
- padding内边距
- margin外边距
- 清楚内外边距
- 元素的显示与隐藏
-
- display 属性
- visibility 可见性
- overflow 溢出
代码风格
- 语法格式
一般放在 head 标签里的 style标签里
一般写法: 选择器{样式}
内容写在< body >里面实现样式与内容的分离。
样式书写格式
提倡用小写字母书写代码;
空格规范:在冒号后面留一个空格;在选择器和大括号中间留空格;
/*展开式风格:(看起来直观) (!重点)*/
h3 {
color: red;
font-size: 20px;
}
/*紧凑风格: (不常用)*/
h3 {color: red;font-size: 20px;}
CSS基础选择器
css选择器的作用:(选择标签用的)
根据不同需求选择不同标签,这就是选择器的作用,比如:选对人,做对事。
选择器分类:基础选择器和复合选择器
基础选择器
(标签选择器、类选择器、id选择器和通配符选择器)
基础选择器 | 作用 | 特点 | 使用情况 | 用法 |
---|---|---|---|---|
标签选择器 | 可以选出所有相同的标签,比如span | 不能差异化选择 | 较多 | p { color: red; } |
类选择器 | 可以选出一个或者多个标签 | 可根据需求选择 | 最多 | .nav { color: red; } |
id选择器 | 一次自能选择一个标签 | id属性只能出现一次 | 用于与js搭配 | #nav { color: red; } |
通配符选择器 | 选出所有标签 | 选择太多 | 特殊情况下使用 | * { color: red; } |
- 类选择器是使用最多的,需要特别掌握!
标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。
- 作用
标签选择器可以把某一类标签全部选择出来,比如所有的<dⅳ>标签和所有的标签。 - 优点
能快速为页面中同类型的标签统一设置样式。 - 缺点
不能设计差异化样式,只是选择全部的当前标签。
<!-- 标签选择器:写上标签名字 --><style>label {color: pink;font-size: 18px;}</style>
如果想要差异化选择不同的标签,单独选个或者某几个标签,可以使用类选择器。
类选择器在HTML中以dass属性表示,在CSS中,类选择器以-个点“"号显示。
- 注意
①类选择器使用“"(英文点号)进行标识,后面紧跟类名(自定义,我们自己命名的)。
②可以理解为给这个标签起了一个名字,来表示
③长名称或词组可以使用中横线来为选择器命名
④不要使用纯数字、中文等命名,尽量使用英文字母来表示
⑤命名要有意义,尽量使别人一眼就知道这个类名的目的
⑥命名规范:见附件(web前端开发规范手册,doc)
记忆口诀:样式点定义,结构类调用。一个或多个,开发最常用。
<style>/*类选择器:样式点定义 结构类(class)调用 一个或多个*/.man {color: green;font-size: 18px;}
</style><body><p class="man">我是个男生</p><span class="man">这是另外一个</span>
</body>
我们可以给一个标签指定多个类名,从而达到更多的选择目的。这些类名都可以选出这个标签。
简而言之:一个标签有多个名字。
- 可以将相同部分写在同一个类里面,减少代码量和代码重复率。
<style>.mancolor {color: green;}.mansize{font-size: 25px;}
</style><body><!-- 多个类名一定要空格分开 --><p class="mancolor mansize">我是个男生</p>
</body>
id选择器为特定id的html元素指定特定样式。
html元素用id属性来设置id选择器,CSS中id选择器用 “#” 号来定义。
- 设置某一个特定的元素的独特样式。
<style>/* 样式#定义,结构id调用,只能调用一次。 */#boy{color: green;font-size: 20px;}
</style><body><p id="boy">我是个男生</p>
</body>
在CSS中,通配符使用 "*"号定义,表示选取页面中所有的元素(标签)
通配符不需要调用,自动给所有元素使用样式.
- 一般用于界面清除所有内外边距。
<style>* {color: green;font-size: 20px;}
</style>
<body><p id="boy">我是个男生</p><ul><li>123</li></ul>
</body>
css复合选择器
复合选择器 | 作用 | 特点 | 使用情况 | 用法 |
---|---|---|---|---|
后代选择器 | 用来选择元素后代 | 可以是子孙后代 | 较多 | 符号是空格 .nav a |
子代选择器 | 选择最近的一级元素 | 只选亲儿子 | 较少 | 符号是 > .nav>p |
并集选择器 | 选择某些相同样式的选择器 | 可以用于集体声明 | 较多 | 符号是逗号, .nav, .header |
链接伪类选择器 | 选择不同状态的链接 | 跟链接相关 | 较多 | 重点记住a 和 a:hover实际开发的写法 |
:focus选择器 | 选出获得光标的表单 | 跟表单相关 | 较少 | input:focus 记住这个写法 |
后代选择器又称为包含选择器,可以选择父元素里面的子元素。
写法:将外层的标签写在前面,内层标签写在后面,中间用空格分隔。
当标签发生嵌套时,内层标签就成为外层标签的后代。
格式:父级 子级{属性:属性值;属性:属性值;}
- 后代选择器可以在多层嵌套一直寻找后代下去
<html>
<head><style>ol li{ /* 取出ol里面的子元素li */font-size: 20px;}ol li p{ /* 取出ol里面的子元素li里的子元素p */font-size: 50px;}.nav li{ /* 也可以通过类来当作父元素 */font-size: 20px;}</style>
</head>
<body><ol><li>1</li><li><p>2</p></li></ol><ul class="nav"><li>1</li><li><p>2</p></li></ul>
</body>
</html>
子元素选择器只能选择作为某元素子元素的元素,就是选亲儿子元素。
写法:把父级标签写在前面,子级标签写在后面,中间跟一个 > 进行连接。
语法:.class>h3{color:red;font-size:14px;}
- 元素一是父亲,元素二是亲儿子。只能管亲儿子,也可以叫亲儿子选择器
<html>
<head><style>.nav>a{ /* 只能找到儿子 */font-size: 20px;}</style>
</head>
<body><div><a href="#">儿子</a><p><a href="#">孙子</a></p></div>
</body>
</html>
**并集选择器可以选择多组标签,同时为他们定义相同的样式。**通常用于集体声明。
格式:元素1,元素二{ 样式声明 }
- 并集选择器通过 , 连接而成,任何形式的选择器都可以作为并集选择器的一部分。
<html>
<head><style> /* 并也可以理解为和的意思,最后一个选择器不需要加 , 号 */div, p,.pin li {color: pink;}</style>
</head>
<body><div>233</div><p>233</p><ul class="pin"><li>233</li><li>233</li></ul>
</body>
</html>
伪类选择器:用于向某些选择器添加特殊的效果。比如给链接添加特殊效果, 比如可以选择 第1个,第n个元素。
特点是用(:)冒号来表示。
- a:link / 未访问的链接 /
- a:visited / 已访问的链接 /
- a:hover / 鼠标位于其链接上 /
- a:active / 选定的链接(鼠标按下未弹起) /
<html>
<head><style> a:link {/* 未访问的链接,把没有点击过的链接选出来 */text-decoration: none;color: #333;}a:visited{/* 选出访问过的链接 */color: orange;}a:hover{/* 选中鼠标当前放在的链接上 */color: #333;}a:active{/* 鼠标按下没松开 */color: skyblue;}</style>
</head>
<body><a href="#">这是一个链接</a><a href="http://www.xxxxxxxx.com">没有访问过的</a>
</body>
</html>
-
注意
1.写的时候,他们的顺序尽量不要颠倒 按照 lvha(四类的首字母) 的顺序。否则可能引起错误。
2.因为叫链接伪类,所以都是利用交集选择器 a:link a:hover。
3.因为a链接浏览器具有默认样式,所以我们实际工作中都需要给链接单独指定样式。 -
实际开发中,我们很少写全四个状态,一般只会用到个别(hover鼠标经过)
-
一般我们写法如下:
<html>
<head><style>a { /* a是标签选择器 所有的链接 */color: gray;}a:hover { /* :hover 是链接伪类选择器 鼠标经过 */color: red; /* 鼠标经过的时候,由原来的 灰色 变成了红色 */}</style>
</head>
<body><a href="#">这是一个链接</a>
</body>
</html>
:focus 伪类选择器用于获取获得焦点的表单元素。
- 焦点就是光标,一般情况< input >类表单元素才能获取,所有这个选择器主要针对表单元素。
<html>
<head><style>input:focus{ /* 获得光标到表单元素提取出来 */background-color: pink;color: red;}</style>
</head>
<body><input type="text"><input type="text"><input type="text">
</body>
</html>
CSS字体属性
CSS fonts(字体)属性 用来定义字体系列、大小、粗细、和文字样式(斜体,下划线等)
可以写多个字体,每个字体之间用逗号隔开。前面字体没有往后找,这是防止没有你要的字体。
属性 | 表示 | 注意点 |
---|---|---|
font-family | 字体 | 按照团队中使用的字体来写 |
font-size | 字号 | 一定要加上单位px |
font-weight | 字体粗细 | 记住加粗是 700 或者 bold 不加粗是 400 或 normal。不要加上单位 |
font-style | 字体样式 | 倾斜是 italic,不倾斜是 normal |
font | 字体连写 | 字体连写要按照顺序,字号与字体是必须要有的 |
font-family设置字体系列
<style>p {font-family: '微软雅黑';}li{font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif;}span{font-family: '宋体';}
</style>
<body><p>我是个男生</p><ul><li>123</li></ul><span>266</span>
</body>
font-size设置字体大小
- 可以给整个body设置整个页面的文字大小。
<style>.textS {font-size: 20px;/* 字体20px显示 */}
</style>
font-weight字体粗细
- 实际开发中更喜欢用数字加粗变细。
<style>.textS {font-weight: bold;/* 加粗 */}
</style>
font-style字体样式
<style>.textS {font-style: italic;/* 斜体 */}
</style>
font复合属性写法
- 可以把上面的文字样式综合来写,这样可以更节约代码。
- 必须保留font-size、font-family属性!
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>复合属性</title><style>p {/*font-style: italic; font-weight: 800;font-size: 20px;font-family: '微软雅黑';*//* 复合属性写法 一定按照这个顺序,不能更换顺序,空格隔开 *//* font: font-style font-weight font-size/line-height font-family; */font: italic 800 20px '微软雅黑';font: 20px '微软雅黑'; /* 必须保留font-size、font-family属性! */}</style>
</head><body><p>我是个男生</p>
</body></html>
CSS文本属性
CSS Text(文本)属性可定义文本的外观,比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。
属性 | 表示 | 注意点 |
---|---|---|
color | 文本颜色 | 通常使用十六进制表示,如#fff |
text-align | 文本对齐 | 设置文字水平的对齐方式 |
text-decoration | 字体修饰 | 记住添加下户线是 underline取消下划线none。 |
text-indent | 字体缩进 | 通常缩进两个文字:text-inden:2em |
line-height | 行高 | 设置行与行之间的距离 |
文本颜色color
- 最常用是的是十六进制代码。
<style>p {color: red; /* 预定义颜色,用英文即可 */color: rgb(255,0,0); /* RGB代码 其它写法 rgb(100%,0%,0%) */color: #ff0000; /* 十六进制 */}
</style>
对齐文本text-align
- 设置内容对齐方式,只能设置对平对齐。
<style>p {text-align:left;/* 左对齐(默认方式) */text-align: right;/* 右对齐 */text-align: center;/* 居中对齐 */}
</style>
文本装饰text-decoration
- 添加下划线、删除线、上划线等。
<style>p {text-decoration: none; /*默认,没有线*/text-decoration: overline;/*上划线,很少用*/text-decoration: underline;/*下划线,a标签自带下划线*/text-decoration: line-through;/*删除线,很少用*/}a{text-decoration: none; /* 去点链接标签的下划线 */}
</style><body><p>我是个男生</p><a href="#">这是个链接</a>
</body>
文本缩进text-indent
em是一个相对单位,当前元素(font-size)1个文字的大小,如果没有设置大小,按照当前父级元素的1文字大小。
- text-indent属性用来指定第一行的缩进,通常是将段落的首行缩进。
<style>p {text-indent: 50px; /* 首行缩进的距离 */text-indent: 2em; /* 首行缩进两个单词 */}
</style>
行间距line-height
行间距由:上间距、下间距和文本高度构成。
- line-height属性用于设置文字每行之间的距离。就是文字每行之间的距离。
<style>p {line-height: 26px; /* 行间距 */}
</style>
- 使用小技巧:将line-height设置成height高度可以实现垂直居中。
- 原理:
CSS的引入方式
CSS可以按照书写的位置不同分为三种。
样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
---|---|---|---|---|
内部样式表 | 部分结构与样式相分离 | 没有完全分离 | 较多 | 控制当前页面 |
行内样式表 | 权重高,书写方便 | 结构与样式混写 | 较少 | 控制当前标签 |
外部样式表 | 完全结构与样式相分离 | 必须引入 | 最多!(推荐使用) | 控制多个页面 |
内部样式表
内部样式表(内嵌入式表)是书写到html内部,将所有的CSS代码抽取出来,单独放到一个< style >标签中。
理论上可以放置在html里面的任何地方,但是一般都会放到< head >标签中。
<html>
<head><style>/* 写在这里面 */div {width: 50px;height: 50px;}</style>
<head>
<body><div></div>
</body>
</html>
行内样式表
行内样式表(内联样式表)是在元素标签内部的style属性中写入CSS样式。
一般用于修改简单的样式。由于书写繁琐,没有体现结构样式相分离的思想,不推荐大量使用。
通常也叫做行内式引入
- style其实就是标签的一个属性
- 在双引号里面写,要符合CSS规范。
<html>
<head><head>
<body><div style="color: pink;font-size: 20px;">行内样式表</div>/* 写在当前元素里,用style */
</body>
</html>
外部样式表
实际开发使用的都是外部样式表。核心:样式单独写到CSS文件中,然后把CSS文件引入到html页面中使用。
- rel: 定义当前文档与被链接文档之间的关系。这里需要stylesheet,表示被链接文本是样式表文件。
- href: 定义被链接文档的位置。
- 开发中最常用!
<html>
<head><link rel="stylesheet" href="css/index.css">/* 的用<link>标签引用css文件,通过路径 */
<head>
<body>
</body>
</html>
CSS元素显示模式
作用:在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的网页。
元素显示模式就是元素(标签)以什么方式进行显示,比如< div >自己占一行,比如行可以放多个< span >。
- HTML元素一般分为块元素和行内元素两种类型
元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
---|---|---|---|---|
块级元素 | 一行只能放一个块级元素 | 可以设置宽高 | 100% | 容器级可以包含任何标签 |
行内元素 | 一行可以放多个行内元素 | 不可以直接设置宽高 | 它本身内容的宽度 | 容纳文本或者其它行内元素 |
行内块级元素 | 一行可以放多个行内块元素 | 可以设置宽高 | 它本身内容的宽度 |
块元素
常见的块元素有< h1 >~< h6 >、< p >、< div >、< ul >、< ol >、< li >等,其中< dⅳ >标签是最典型的块元素。
- 块级元素的特点:
①比较霸道,自己独占一行。
②高度,宽度、外边距以及内边距都可以控制。
③宽度默认是容器(父级宽度)的100%
④是一个容器及盒子,里面可以放行内或者块级元素。
- 注意
①文字类的元素内不能使用块级元素
②< p >标签主要存放文字,因此< p >里面不能放块级元素,特别是不能放< dⅳ >
③同理,< h1 >~< h6 >都是文字类块级标签,里面也不能放其它标签
行内元素
常见的行内元素有< a >、< strong >、< b >、< em >、< i >、< del >、< s >、< ins >、< u >、< span >等,其中**< span >标签是最典型的行内元素**。有的地方也将行内元素称为内联元素。
- 行内元素的特点
①相邻行内元素在一行上,一行可以显示多个
②高、宽直接设置是无效的
③默认完度就是它本身内容的完度
④行内元素只能容纳文本或其他行内元素
- 注意
①链接里面不能放链接
②特殊情况链接< a >里面可以放块级元素,但是给< a >转换一下块级模式最安全
行内块元素
在行内元素中有几个特殊的标签——< img />、< input />、< td >,它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。
- 行内块元素的特点
①和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙。一行可以显示多个(行内元素特点)。
②默认宽度就是它本身内容的宽度(行内元素特点)。
③高度,行高、外边距以及内边距都可以控制(块级元素特点)
显示模式的转换
特殊情况下,我们需要元素模式的转换。
一个模式的元素需要另外一种模式的特性,比如想要增加链接< a >的处罚范围。
- 转换为块元素:display: block;
- 转换为行内元素:display: inline;
- 转换为行内块: display: inline-block;
背景
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。
<html>
<head>
<style>
body{background-color: black; /*背景颜色*/background-image: url(https://ossweb-img.qq.com/upload/webplat/info/yxzj/20200529/832781061912190.jpg);background-repeat: no-repeat;/* 不重复 *//* background-position: center top; */background-position: center 40px; /* 混合写法,居中向下40px */background-attachment: fixed; /* 固定图片不跟着滚动 *//*复合写法*//* background: black url(https://ossweb-img.qq.com/upload/webplat/info/yxzj/20200529/832781061912190.jpg) no-repeat fixed center top; */font-size: 20px;color: #ccc;
}
div{ height: 50px;background-color: rgba(0, 0, 0, .5);/* 半透明效果 */
}
</style>
<head>
<body>
<div></div>
<p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p><p>23333333</p>
</body>
</html>
- 总结
属性 | 作用 | 值 |
---|---|---|
background-color | 背景颜色 | 预定义颜色/十六进制/RGB代码 |
背景色半透明 | 背景颜色半透明 | background-color: rgba(0, 0, 0, .5);必须是四个值 |
background-image | 背景图片 | url(图片路径) |
background-repeat | 是否平铺 | repeat / no-repeat / reoeat-x / repeat-y |
background-position | 背景位置 | length/position 分别是x和y坐标 |
background-attachment | 背景附着 | scroll(背景滚动) / fixed(背景固定) |
背景简写 | 书写更简单 | 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置 |
背景颜色
background-color 属性设置元素的背景颜色。
一般情况下元素背景颜色是transparent(透明)
- background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域,扩展到元素边框的外边界(但不包括外边距)。如果边框有透明部分(如虚线边框),会透过这些透明部分显示出背景色。
- 背景颜色半透明
- CSS3 提供了背景颜色半透明的效果。background: rgba(0,0,0,0.3); 一个参数对应一个颜色。
- 可以吧最后一个的零省略掉:background: rgba(0,0,0,.3);
- 最后一个参数是alpha透明度,取值在0~1之间
背景图片
background-image 属性为元素设置背景图像。
元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距。
默认地,背景图像位于元素的左上角,并在水平和垂直方向上重复。
提示:请设置一种可用的背景颜色,这样的话,假如背景图像不可用,页面也可获得良好的视觉效果。
- background-image 属性描述了元素的背景图像。实际开发常见于logo或者一些装饰的小图片或者是超大的背景图片,优点是便于控制位置。
<html>
<head><style>div { /* 不要落下url。默认值是none */background-image: url(/* 这里是图片地址 */);}</style>
<head>
<body><div></div>
</body>
</html>
背景平铺
background-repeat 属性设置是否及如何重复背景图像。
默认地,背景图像在水平和垂直方向上重复。
提示:背景图像的位置是根据 background-position 属性设置的。如果未规定 background-position 属性,图像会被放置在元素的左上角。
背景方位
background-position 属性设置背景图像的起始位置。
这个属性设置背景原图像(由 background-image 定义)的位置,背景图像如果要重复,将从这一点开始。
提示:您需要把 background-attachment 属性设置为 “fixed”,才能保证该属性在 Firefox 和 Opera 中正常工作。
- 写法:background-position:x y;
- x坐标 y坐标;可以使用方位名词和精确单位。
- 精确单位:一定按照严格顺序 x y; 单独写一个精确值,另一个是垂直居中。
- 方位名词:前后顺序不影响。单独写一个参数,另一个默认是center。
- 混合写法:第一个一定是x坐标,第二个是y坐标
背景像素固定(背景附着)
ackground-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。可以制作视差滚动效果。
背景复合属性写法
background 简写属性在一个声明中设置所有的背景属性。
- 可以按顺序设置如下属性:(没有硬性要求)
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
- 如果不设置其中的某个值,也不会出问题,比如 background:#ff0000 url(‘smiley.gif’); 也是允许的。
- 通常建议使用这个属性,而不是分别使用单个属性,因为这个属性在较老的浏览器中能够得到更好的支持,而且需要键入的字母也更少。
盒子模型
页面布局要学习三大核心,盒子模型、浮动和定位,通过盒子模型能很好的布局页面。
页面布局的核心本质:利用CSS摆盒子。
所谓盒子模型:就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。
CSS盒子模型本质上是一个盒子,封装周围的HTML元素,它包括:边框、内外边距、内边距和实际内容
- 阴影效果:CSS3新增属性
border: ; /* 边框 */
content: ; /* 内容 */
padding: ; /* 内边距 */
margin: ; /* 外边距 */
border边框
边框有三部分组成:边框宽度(粗细)边框样式 边框颜色
可分开写,也可以复合写(**border:粗细、样式、颜色 **)。
可以单独设置某条边:border - 方位
边框会影响盒子的实际大小。
如果盒子大小需要包含边框:需要减去 width/height(注意双倍)
属性 | 作用 |
---|---|
border-width | 定义边框粗细,单位:px |
border-color | 边框颜色 |
border-style | 边框的样式 |
- border-style : (solid、dotted和dashed比较常用)
- border-collapse: collapse;合并相邻边框
padding内边距
padding属性用于设置内边距,即边框与内容之间的距离。(上下左右)
- 复合简写:
1个值:上下左右
2个值:上下 / 左右
3个值:上 / 左右 / 下
3个值:上 / 右 / 下 / 左 (顺时针)
padding会影响盒子的实际大小。
如果盒子大小需要保持一致:让 width/height 减去 多出来的内边距大小(注意双倍)
- padding盒子好处:
当有多个不同的盒子,盒子字数不同。不用给每个盒子宽度,直接给 pidding 值
- 盒子没有指定 width/height 属性,则padding不会撑开盒子大小。
margin外边距
margin属性用于设置外边距,即盒子与盒子之间的距离。(上下左右)
- 复合简写:(同padding)
1个值:上下左右
2个值:上下 / 左右
3个值:上 / 左右 / 下
3个值:上 / 右 / 下 / 左 (顺时针)
- 水平居中 (margin: 0 auto)
- 盒子必须指定高度
- 盒子左右的外边距都设置位auto
注意:以上方法是让块级元素水平居中,行内元素或者行内块元素水平居中
给其父元素添加 text-align: center 即可。
- 嵌套块元素垂直外边距塌陷
对于两个嵌套关系(父子关系)的块元素,父元素有上边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值。
- 解决方案
- 可以位父元素定义上边框
- 可以位父元素定义上内边距
- 可以位父元素添加 overflow: hidden
- 还有其它方法,比如浮动、固定、绝对定位的盒子。
清楚内外边距
网页元素很多都带有默认的内外边距,而且不同浏览器默认的也不一致。因此我们在布局前,首先要清除下网页元素的内外边距。
- 行内元素尽量值设置左右的内外边距
- 注意:
行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距。
但是转换为块级和行内块元素就可以了。
* {padding: 0; /*清楚内边距*/margin: 0; /*清楚外边距*/
}
元素的显示与隐藏
本质:让一个元素在页面中隐藏或者显示出来。
- display 显示隐藏元素 但是不保留位置
- visibility 显示隐藏元素 但是保留原来的位置
- overflow 溢出显示隐藏 但是只是对于溢出的部分处理
display 属性
可以搭配JS来实现很多特效,应用广泛。
display 隐藏元素后,不再占有原来的位置。
display: none ;
隐藏对象display:block ;
除了转换为块级元素之外,同时还有显示元素的意思
visibility 可见性
display 隐藏元素后,继续占有原来的位置。
visibility:visible ;
元素可视visibility:hidden;
元素隐藏
overflow 溢出
让一个元素在页面中隐藏或者显示出来。
overflow 属性指定了如果内容溢出一个元素的框(超过其指定高度及宽度) 时,会发生什么。
- 有定位的盒子, 请慎用overflow:hidden
原文地址:https://blog.csdn.net/qq_27185691/article/details/106454911
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:CSS学习笔记(详细)- 基础 如若内容造成侵权/违法违规/事实不符,请联系淘嘟嘟网邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!