CSS学习笔记（详细）- 基础

最新推荐文章于 2023-12-16 17:07:11 发布

丨小小风离丨

最新推荐文章于 2023-12-16 17:07:11 发布

阅读量489

点赞数 1

分类专栏： css 文章标签： html css

本文链接：https://blog.csdn.net/qq_27185691/article/details/106454911

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

CSS学习笔记从零开始

代码风格
- 样式书写格式
CSS基础选择器

代码风格

语法格式

一般放在 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选择器为特定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>

链接伪类选择器（LVHA）

伪类选择器：用于向某些选择器添加特殊的效果。比如给链接添加特殊效果，比如可以选择第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 伪类选择器（表单元素）

: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

丨小小风离丨

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记（详细）- 基础

CSS学习笔记从零开始代码风格样式书写格式CSS基础选择器css选择器的作用：（选择标签用的）选择器分类：基础选择器和复合选择器基础选择器标签选择器类选择器 **- 开发最常用**多类名id选择器（一次性）通配符选择器css复合选择器后代选择器子元素选择器交集选择器并集选择器CSS字体属性font-family设置字体系类font-size设置字体大小font-weight字体粗细font-style字体样式font复合属性写法CSS文本属性文本颜色color对齐文本text-align文本装饰text-
复制链接

扫一扫