Day5:html和css

标题图

Day5:html和css

如何实现盒子居中问题，要让盒子实现水平居中，要满足是快级元素，而且盒子的宽度要定义。而后数值为auto就可。

.dashu {
 width: 100px;
 margin: 0 auto;
}

盒子的水平居中为

margin: auto;

而文字的水平居中为:

text-align: center;
text-align: center; // 文字水平居中
margin: auto; // 盒子的水平居中

盒子水平居中:

 
 
 


 

 达叔小生
 



margin: 0 auto; // 浅显
// margin: auto; 上下不显示

清理内外边距

* {
 padding: 0;
 margin: 0;
}

外边距合并:

 
 
 


 
1

 
2

外边距合并以合并的最大值为准.

content宽度和高度

padding不会影响盒子的大小.

 
 
 


 

 
dashu

 

padding内边距

圆角

border-radius: 50%;



 
 
 


 






 
 
 


 

 文字内容
 文字内容
 文字内容
 

盒子阴影

box-shadow: 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影

属性说明h-shadow水平阴影的位置v-shadow垂直阴影的位置blur模糊距离spread阴影的尺寸color阴影的颜色inset将外部阴影改为内部阴影

浮动

float浮动:标准流,浮动,定位.

float可以让多个div在同一行显示.

属性值说明left元素向左浮动right元素向右浮动none元素不浮动

选择器 {float: 属性值;}



 
 
 


 

 






 
 
 


 

 

 






 
 
 


 

 

 

盒子模型布局稳固性

width > padding > margin 

浮动(float)

普通流（标准流）、浮动和定位

属性值形容left元素向左浮动right元素向右浮动none元素不浮动（默认值）

推荐

Day1:html和css

Day2:html和css

Day3:html和css

Day4:html和css

假如看了觉得不错

点赞！转发！

达叔小生：往后余生，唯独有你

You and me, we are family !

90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通

简书博客： 达叔小生

https://www.songma.com/u/c785ece603d1

结语

• 下面我将继续对 其余知识 深入讲解 ，有兴趣可以继续关注
• 小礼物走一走 or 点赞