#博学谷IT学习技术支持#哦------------------------------------------------- 前端--css特性+盒子模型+布局&基础知识总结

目录:

♥一. css三大特性

♥二. 盒子模型

♥三.  边框

♥四. 内边距padding

♥五 : 外边距margin

 ♥六. 外边距塌陷象形
————————————————
 ♥一. css三大特性:继承性&层叠性&优先级

1.继承性:子元素有默认继承父元素样式的特点:

            例如:1.color

                       2.文字样式的属性都可以,例如:font-size,font-weight,font-style,font-family

                      3.text-indent首行缩进,text-align对齐方式

                       4.line-height   行高

                     但是 不是就不可以,例如背景,宽高

2.层叠性:样式冲突时,只有选择器优先级相同时,才能通过层叠性判断的结果。

              1.给一个标签设置:不同的样式,样式会层叠作用到一个标签上

                                              相同的样式,此时 样式会层叠,最终写在最后的样式才会生效

3.优先级:看选择器的选择谁更精准,谁的优先级就越高,谁的范围就越大,谁就越低,important的权重最大,前提是能是继承的;

   计算比较公式:行内个数:id选择器个数;类选择器个数;标签选择器个数

♥二. 盒子模型:内容&边框&内边距

1.内容:content:宽度

                             高度

♥三.  边框:border:复合属性最常用

                        例如: border:10px  soild  red;单个取值的连写,取值之间空格隔开

           单个属性:连写形式:边框粗细:border-width 

                                               边框线条: border-style

                                               边框杨色:border-color

          边框单向:设置边框:顶部边框:border-top

                                              底部边框:border-bottom

                                              左边边框:border-left

                                              右边边框:border-right

       边框线条:虚实线:    实线:solid

                                           虚线:dashed

                                           点线:dotted

                                          

♥四. padding

边框与内容的距离:布局是如果内容居中且上下左右的边距一样-可以放大设置盒子-设置内边距

                             一般设置:四个值:padding: 10px  20px  30px   40px;表示:上-右-下-左

单方向设置:上-下-左-右边距:padding-top                      

                                                   padding-bottom

                                                   padding-left

                                                   padding-right

♥五 : 外边距margin

盒子与盒子的距离:写法同内边距一样,就是把padding变成margin​​​ 

外边距:会出现,合并现象,垂直布局的块元素,上下margin 会合并需要,取取值大的,解决一般给设置一个。

♥六. 外边距塌陷象形:下回会持续分享!

                        

                                                                                                    

              

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值