HTML+CSS精简总结6月3日

CSS（层叠样式表）

CSS注释

css注释的书写格式：/* */

1.css元素选择器

标签{}

例子：

<style>
	p{fontsize:80px;}
<style>

2.类选择器

<标签 class="">

.类名{}

复用避免冗余

3.ID选择器

#ID值

<style>
    #one{fontsize:84px;
    	 color:red;
    }
<style>    

注：ID值不能重复

盒模型

盒子分类

• 行盒 inline（a标签，共享一行）

• 块盒 block（p标签，独占一行）

• 不生成盒 none

  <style>
  	p{display:inline;}
  </style>
  

盒子的组成

• margin外边距

• border边框

• padding 内边距 content 内容

注：

1. body有他自身的margin

2. 添加padding后盒子增大，保持之前的大小，减去对应的宽高值

3. 背景颜色会延伸至padding区域

4. margin**重叠现象**：在垂直方向，margin不会相加，取最大值

5. margin、padding、border 4个边是可以单独进行设置的

6. 单独设置某一边 marging、padding、border的时候，用小属性去层叠大属性

   <style>
       div{
   		padding：20px；
   		padding-left：40px；
       }
   </style>    
   

7.大属性实际上对应4个值，之前写的1个值实际上是缩写。对应的4个值是上右下左

8.盒子居中：margin：0 auto；

弹性盒子

1.弹性盒子第一步，将他们的父元素 display属性设置为flex

.box{
	display: flex;
}

2.css属性设置

注：通配符选择器，选择所有的元素

<style>

	*{

	margin:0

	padding:0

}

</style>

3.容器的属性

flex-direction（项目排列）

row 水平方向，起点在左端

row-reverse 水平方向，起点在右端

column 垂直方向，起点在上面

column-reverse 垂直方向，起点为下面

flex-wrap(换行属性)

nowrap 不换行

wrap 换行，第一行在上面

wrap-reverse 换行，第一行在下面

justify-content设置项目在主轴上的对齐方式

flex-start 左对齐

flex-end 右对齐

center 居中

space-between 两段对齐

space-around 每个元素周围分配相同的空间 中间有叠加

space-evenly 每个元素之间的间隔相等

align-items设置Y轴上的对齐方式

flex-start 从上面对齐

flex-end 从下面对齐

center 中点对齐

baseline 项目中的文字的对齐

stretch 默认值，如果高度为auto，将填满整个容器

图片

background：url("./") no-repeat;

background-size：content;

​ cover;

backgound-position: 40px 90px;

​

Sprite图

请求一张图片，节约资源

通过position设置

background position： x轴坐标，y轴坐标

子选择器

<style>
    .two p{
     color:red;   
    }
</style>    

<div class="two">
    <div>
        <p>123</p>
        <p>123</p>
</div>

用于控制子标签

span

<p>123451231<span>1231231</span></p>

header span:first-child i

header span:nth-child(2) i

网页实用设置

盒子的间距用： margin-top

标题用h标签：h1 h2 h3 标题

h标签有margin 和padding 在全局设置 取消 margin padding值

调整行内的文字垂直居中：line-height：

div跑右边 检查div是否已经全部结束

div里面的模块大小可以用百分比设置 height：50%

​ width：50%

div中选择第一个 .shop_bottom>div:first-child:{}

​ .shop_bottom>div:last-child:{}

border会实际占用像素，改用outline

子元素选择器

.star_bottom>div{

}