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.jianshu.com/u/c785ece603d1

结语

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