# css布局常用样式属性
- **`width`**
设置元素(标签)的宽度，如：`width:100px;`
- **`height`**
设置元素(标签)的高度，如：`height:200px;`
- **`background`**
设置元素背景色或者背景图片，如：`background:gold; `设置元素背景色为金色
- **`border`**
设置元素四周的边框，如：`border:1px solid black;` 设置元素四周边框是1像素宽的黑色实线，也可以拆分成四个边的写法`border-top(left/right/bottom):1px solid black;`
> border:100px 150px 200px 300px;
> /\*设置顺序为顺时针，即上右下左\*/
- **`padding`**
设置元素包含的内容和元素边框的距离，也叫内边距，如`padding:20px;padding;`是同时设置4个边的，也可以像border一样拆分成分别设置四个边`padding-top(left/right/bottom):1px solid black;`
> padding:100px 150px 200px 300px;
> /\*设置顺序为顺时针，即上右下左\*/
- **`margin`**
设置元素和外界的距离，也叫外边距，如`margin:20px;margin;`是同时设置4个边的，也可以像border一样拆分成分别设置四个边
> margin:100px 150px 200px 300px;
> /\*设置顺序为顺时针，即上右下左\*/
- **`float`**
设置元素浮动，浮动可以让块元素排列在一行，浮动分为左浮动：float:left; 右浮动：float:right;
# css文本常用样式属性
- **`color`**
设置文字的颜色，如： `color:red;`
- **`font-size`**
设置文字的大小，如：`font-size:12px;`
- **`font-family`**
设置文字的字体，如：`font-family:‘微软雅黑‘;`为了避免中文字不兼容，一般写成：`font-family:‘Microsoft Yahei‘;`
- **`font-weight`**
设置文字是否加粗，如：`font-weight:bold;` 设置加粗 `font-weight:normal` 设置不加粗
- **`line-height`**
设置文字的行高，如：`line-height:24px;`表示文字高度加上文字上下的间距是24px，也就是每一行占有的高度是24px
- **`text-decoration`**
设置文字的下划线，如：`text-decoration:none;` 将文字下划线去掉
- **`text-align`**
设置文字水平对齐方式，如`text-align:center` 设置文字水平居中
- **`text-indent`**
设置文字首行缩进，如：`text-indent:24px;` 设置文字首行缩进24px
## 14-【掌握】css的使用和基本语法
```
语法格式：
选择器{
样式属性:样式值;
样式属性:样式值;
样式属性:样式值;
}
实际效果，例如：
/* css的注释 */
div{
width:100px; /* 宽度：100像素 */
height:100px; /* 高度：100像素 */
background:gold; /* 背景颜色：金色 */
}
```
总结：
```
1. HTML标签的外观都是固定的，想要调整标签里面内容的外观就要使用css。
2. css通过选择器【选择符】来给对应的标签修改外观。
3. css通过声明外观属性和属性值来控制标签外观变化的。
```
## 15-HTML和CSS的代码书写规范
书写HTML的时候，属性和属性值必须先放在标签内部，小于号和大于号中间。
例如下面是错误的：
```
<a> href="http://www.baidu.com"</a>
```
正确：
```
<a href="http://www.baidu.com">内容</a>
```
书写css属性的时候，格式参考以下：
```
<style>
a{
color: red;
font-size: 22px;
}
</style>
```
## 16-【掌握】了解CSS的三种载入方式
内联式：通过标签的style属性，在标签上直接写样式。
嵌入式：通过style标签，在网页上创建嵌入的样式表。
外链式：通过link标签，链接外部css样式文件到html页面中。
总结：
```
1. 优先使用外链式，如果出现某个外观样式只在单一的网页中出现，可以选择嵌入式。
2. 外界很多公司，都是强制要求只使用 外链式。
3. 对于内联式的使用，不是给开发人员手写的，而是在后面我们学到js的时候通过js实现特效时使用的。
```
## 17-【掌握】知道CSS选择器的使用方法
使用选择器的目的，是为了告诉浏览器，我们接下来在花括号中这些样式给哪些/哪个标签声明的。
1. 标签选择器，使用标签名作为选择器，意指给同名的标签统一加上外观样式。
此种选择器影响范围大，一般用来做一些通用设置，或用在层级选择器中。
2. 类选择器，可以使用标签的class的属性，把html网页中的标签进行指定分类，选择器就是分类名称。
3. 层级选择器，我们可以多个不同的范围的选择器写在一起，来控制样式的效果范围
层级选择器可以有2层，3层或者多层，例如，div p 则表示是div包含的p标签会被指定样式
总结，
```
1. 使用类名作为选择器的时候，在左边必须有一个英文的圆点( . )
2. 类名的设置，是不区分标签，也就是说，p和h1之类的标签，都可以设置为同一个类
3. 同一个标签，可以在class属性中，设置属于多个类的，类名之间使用空格隔开。
4. 如果同一个标签中，存在同样的样式属性，但是值不一样，则采用最后声明的那一个。
5. 层级与标签选择器结合使用，减少命名，同时也可以通过层级，限制样式的作用范围。
```
## 18-【掌握】列举字体、字号、颜色控制文字属性
```
color:red; /*设置字体红色*/
font-size:30px; /*设置字体大小为30px*/
font-family: "宋体"; /*设置字体为宋体*/
font-weight: bold; /*设置加粗效果*/
font-style: italic; /*设置倾斜效果*/
text-decoration: underline; /*设置下划线*/
line-height:26px; /*设置行高为26px，每一行之间的距离受这个值的影响*/
text-indent: 2em; /*设置文字缩进2个字符的宽度单位*/
text-align: left; /* 设置文本的对齐方式为靠左对齐 */
```
总结：
```
1. 这些属性用于修改文本内容的外观，常用的就是：color、font-size、font-famil、text-decoration、
line-height和text-indent，text-align。
2. 以下三组固定搭配用于取消标签的默认外观：
font-weight: normal; /*设置文字不加粗*/
font-style: normal; /*设置文字不倾斜*/
text-decoration: none; /*设置文字不带下划线*/
```
## 19-【掌握】列举宽度、高度、背景色布局属性
```
width:100px; /* 设置元素的宽度为100px */
height;100px; /* 设置元素的高度为100px */
/* 设置元素的背景颜色为红色 */
background-image: url("图片路径") x y no-repeat; /* [仅作了解]设置元素的背景图片 */
background: red; /* 最常用，背景样式简写 */
background: orange url("images/banner.jpg") no-repeat 30px 20px; /* url用于设置标签的背景图片，no-repeat 表示设置背景图片 */
```
总结：
```
1. 元素的宽高和背景设置是最常见的。
2. 元素的背景设置一般通过简写来完成，所以重点掌握 background 和 background-color
```
## 20-【掌握】知道border属性的写法
设置元素的边框，可以使用border。
```
/*四个方向边框：边框粗细[5px] 边框类型[实线] 颜色[黑色]*/
border: 5px solid #000;
可以设置1个方向的边框：
border-top: 5px solid #000; 单独设置顶部边框
border-left:5px solid #0f0; 单独设置左边边框
border-right:5px solid #f00; 单独设置右边边框
border-bottom:5px solid #00f; 单独设置底部边框
```
总结：
```
1. 边框属性在工作中大部分出现两种情况；4个方向一起设置，要么值设置其中一个方向的边框。
2. 盒子模型，在F12工具中，浏览器为了显示标签元素在网页中的占位尺寸，会显示盒模型
```
## 21-【掌握】说出盒子模型中margin和padding属性的作用
padding 设置标签的内容和标签边框之间的距离，也叫内边距。
padding属性值的设置类似边框的设置。可以同时设置4个方向，也可以单一方向设置。
```
padding:20px; /* 同时设置元素的四个方向内边距 */
padding-top:1px solid black;
padding-right:1px solid black;
padding-bottom:1px solid black;
padding-left:1px solid black;
```
margin 设置标签边框和其他元素的距离，也叫外边距，同样类似边框的设置。
```
margin:20px; /* 同时设置元素的四个方向外边距 */
margin-top:1px solid black;
margin-right:1px solid black;
margin-bottom:1px solid black;
margin-left:1px solid black;
```
总结：
```
1. 内外边距的设置，和边框几乎一样，所以可以并在一起记忆。当然，最好通过浏览器的提示来编写。
```
## 22-【了解】知道出margin和padding的多值写法
在开发中，内外边距的设置，有时候还可以同时设置多个值。
```
padding:100px 150px 200px 300px;
/*设置顺序为顺时针，即上右下左*/
margin:100px 150px 200px 300px;
```
总结：
```
1. 书写4个值的时候，是根据时钟的指针移动方向来书写，上右下左。
2. 开发过程中，最常用的就是padding: 10px;这样的。多值写法仅作了解。
```
## 23-【了解】明白盒子模型对于标签的真实尺寸计算方法
默认情况下，盒子模型[标签元素]的实际占位是：width+padding+border (水平方向)
总结：
```
1. 公式：
标签元素实际宽度 = width +左内边距 +右内边距 + 左边框+右边框
标签元素实际高度 = height +上内边距 +下内边距 + 上边框+下边框
```
扩展：
html5（css3）提供了一个属性box-sizing:border-box;方便我们计算盒子的实际占位。
盒子有了这个属性之后，盒子的实际占位就是width/height的了，附加的padding属性和border属性都算在了width/height里面。
## 24-【掌握】元素浮动
块级元素会自带换行效果，但是如果我们希望让多个块级元素并排显示。则需要使用float属性，让块级元素浮动显示在一行。
浮动元素本身不会占据页面的高度。所以如果父级标签没有高度，则高度因为变成0
```
float：left; /* 靠左浮动 */
float: right; /* 靠右浮动 */
float: none; /* 默认值，不浮动 */
```
总结：
```
1. 浮动是为了解决块级元素的并排问题。大部情况下，写浮动遵循的原则：同级的盒子要么都不浮动，要么都浮动。
2. 浮动会产生元素位置移动，那么元素原来的占位，就会被浏览器回收。
3. 在初学浮动阶段，很容易把float和text-align混淆。
float，是针对元素标签进行浮动，对于块级元素和行级元素都有效。
text-align，是针对文本内容进行文本对齐，只针对标签里面的文本或者行级标签有效。对于块级标签无效。
4. 在浮动所有子元素时，如果父元素没有设置高度，那么父元素的高度会因为子元素都浮起来了而变成0像素高度
解决这个问题的方案就是给父级标签设置属性 overflow: hidden;来解决。
```
## 06-【掌握】新的css选择器
##### 1. id选择器
? 给标签声明一个id属性，使用id属性的值作为选择器，对标签进行单独的样式声明。
```
#p3{
color: red;
}
```
##### 2. 群组选择器
? 在css中如果有多个选择器出现重复样式时，可以把这些选择器使用逗号[，]进行统一的声明那些公共的样式
```
h1,p,input,textarea,h2,h3{
margin: 0;
padding:0;
}
```
##### 3. 伪类选择器
? 可以在某些标签的特定状态下，统一声明样式，这些特定状态是固定的。
```
.p4:hover{
color: blue;
border-bottom: 1px solid red;
background: orange;
}
```
总结：
```
1. 在前端网页开发的时候，id的值是唯一的，不要出现一个页面有多个同样的id值的情况，尽量不要滥用id。
2. 群组选择器，是css代码中，同时给多个选择器统一设置样式，这样可以减少class类选择器的声明。
3. 伪类选择器，只有hover最常用。
```
## 07-【掌握】选择器的权重等级
css中，样式的应用方式可以分为几个等级，按照等级来计算权重
1、内联样式，如：style=””，权重值为1000
2、ID选择器，如：#content，权重值为100
3、类，伪类，如：.content、:hover 权重值为10
4、标签选择器，如：div、p 权重值为1
```
层级选择器：主要层级选择器，有哪些选择器组成。
.content .text p{ # 10 + 10 + 1 = 权重值是21
....
}
.content p{ # 10 + 1 = 权重值是11
}
```
css的权重概念，主要指代的是因为我们css中提供了很多不同的选择器来设置元素的样式。
那么这些选择器里面的样式，哪些会被元素使用，这些就会产生优先级别。
针对层级选择器的权重值计算：把所有层级中使用到的选择器的权重值进行加法计算，就可以得到了。
```
body #content .main_content h2{ background: red; }
#content .main_content h2P{background: black; }
上面两个层级选择器，虽然控制的是同一个h2标签，但是参与到层级选择器中的数量，两个不一样，所以通过计算，
可以发现前面的选择器多了一个body,body是类型选择器，多一个1,因此，优先使用的样式就是上面的层级选择器。
```
总结：
```
1. 等级高的样式会覆盖等级低的样式。浏览器优先使用权重值高的选择器的样式
权重等级：内联 > ID > 类/ 伪类 > 类型
2. 开发网页时，优先使用权重等级低的方式来声明css样式，避免使用权重等级高的方式来声明。
建议使用类选择器和层级选择器以及类型选择器
```
## 08-【掌握】标签元素的定位控制
使用position进行元素的定位，通过这个position的不同的值，可以配合方位属性，让元素显示页面中的任何一个位置。
position有四个值：
static，默认值，去除元素的定位。也就是不进行定位。
relative，相对定位，元素相对于自身原来的位置【左上角】进行定位。原来的位置不会被浏览器回收。
absolute，绝对定位，元素相对于当前父元素进行定位。原来的位置会被浏览器回收。
fixed，固定定位，元素相对于浏览器页面窗口进行定位。页面滚动的时候，不会改变位置。
为了实现定位的位置控制，css中提供了四个不同 方位属性给我们进行定位。
top：表示距离顶部指定的长度
bottom:表示距离底部指定的长度
left：表示距离左边指定的长度
right：表示距离右边指定的长度
总结：
```
绝对定位：相对于父元素的四个边框进行定位，浏览器会回收定位元素原来的位置。
相对定位：相对于自己原来的左上角进行定位，浏览器不会回收定位元素原来的位置。
固定定位：相对于浏览器窗口的四个边框进行定位，浏览器会回收定位元素的原来位置。
```
元素使用了定位以后，可以设置层级，通过z-index进行设置，所有的HTML元素的z-index默认值为0，我们可以通过z-index，设置不同的值来控制定位元素之间的覆盖。值越大的，层级越高，值越小，层级就越低，如果定位元素的层级为-1，则会被普通没有定位的元素进行覆盖。
层级高的会覆盖层级低的。
总结：
```
1. 使用定位的时候，一般top和bottom不要同时使用，lefe 和 right 不要同时使用。除非特殊情况。
2. 相对定位的特点：元素本身在文档中的位置还保留，同时元素相对于自身原来的位置进行定位。
3. 绝对定位的特点：元素本身在文档中的位置被回收，同时元素相对于当前父级元素[有定位属性的父元素]进行定位，如果当前父级元素没有被设置为定位，那么元素会相对于body标签进行定位。
4. 固定定位的特点：元素本身在文档中的位置被回收，同时元素相对于浏览器页面窗口进行定位。
5. 在开发中，最常使用的是绝对定位，一般子元素设置绝对定位以后，会把父元素设置为相对定位。
```
## 09-【扩展】使用定位完成页面元素居中效果
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
height: 200px;
background: red;
/* 绝对居中，上下左右居中 */
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.box1{
background: blue;
/* 上下居中需要定位，左右居中直接设置margin: auto */
/* margin: auto;表示让浏览器自动根据当前元素的宽高情况，设置自动的外边距 */
width: 100px;
height: 50px;
margin: auto;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>
```
## 10-【了解】标签元素的显示特性
在css中可以通过display 对标签的显示特性[显示模式]进行设置，值有4种：
1. block，以块状元素进行显示
2. inline，以行内标签进行显示
3. inline-block，以行内块级标签进行显示 ，类似图片这样的，一行可以有多个，同时具有宽高，内外边距。
4. none，以隐藏标签进行显示[隐藏起来的标签]，类似<input type="hidden" >
总结：
```
标签元素本身有三种不同的显示模式：
1. 块状元素，例如默认的h1-h6,,
自带换行，默认占据整行。
有宽高。
2. 行内元素，例如a
不自带换行，默认一行可以放多个
本身没有width 和 height，没有宽高。高度和宽度，来自于内容。
3. 行内块级元素，例如input,img
不自带换行，默认一行可以放多个
有宽高。
```
原文：https://www.cnblogs.com/iam-ironman/p/10549377.html