码迷,mamicode.com
首页 > Web开发 > 详细

CSS——05核心:盒子模型2

时间:2020-02-04 09:12:52      阅读:288      评论:0      收藏:0      [点我收藏+]

标签:shadow   NPU   上下   hidden   强制   css3   overflow   影子   规范   

5.6 清除元素的默认内外边距(重要)

技术图片

为了更灵活方便地控制网页中的元素,制作网页时,我们需要将元素的默认内外边距清除

代码: 0

* {
   padding:0;         /* 清除内边距 */
   margin:0;          /* 清除外边距 */
}

注意:

  • 行内元素为了照顾兼容性, 尽量只设置左右内外边距, 不要设置上下内外边距。

5.7 外边距合并(这是一个非常严重的问题,你必须要了解和解决)

使用margin定义块元素的垂直外边距时,可能会出现外边距的合并。

(1). 相邻块元素垂直外边距的合并

  • 当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom
  • 下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和
  • 取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并(也称外边距塌陷)。

技术图片

解决方案:尽量给只给一个盒子添加margin值

(2). 嵌套块元素垂直外边距的合并(塌陷)

  • 对于两个嵌套关系的块元素,如果父元素没有上内边距及边框
  • 父元素的上外边距会与子元素的上外边距发生合并
  • 合并后的外边距为两者中的较大者

技术图片

解决方案:

  1. 可以为父元素定义上边框。
  2. 可以为父元素定义上内边距
  3. 可以为父元素添加overflow:hidden。

还有其他方法,比如浮动、固定、绝对定位的盒子不会有问题,后面咱们再总结。。。

6. 盒子模型布局稳定性

  • 学习完盒子模型,内边距和外边距,什么情况下用内边距,什么情况下用外边距?

    • 大部分情况下是可以混用的。 就是说,你用内边距也可以,用外边距也可以。 你觉得哪个方便,就用哪个。

我们根据稳定性来分,建议如下:

按照 优先使用 宽度 (width) 其次 使用内边距(padding) 再次 外边距(margin)。

  width >  padding  >   margin   
  • 原因:
    • margin 会有外边距合并 还有 ie6下面margin 加倍的bug(讨厌)所以最后使用。
    • padding 会影响盒子大小, 需要进行加减计算(麻烦) 其次使用。
    • width 没有问题(嗨皮)我们经常使用宽度剩余法 高度剩余法来做。

拓展@

以下我们讲的CSS3部分新属性, 但是我们遵循的原则是,以下内容,不会影响我们页面布局, 只是样式更好看了而已。

1.圆角边框(CSS3)

技术图片

  • 语法:
border-radius:length;  
  • 其中每一个值可以为 数值或百分比的形式。

  • 技巧: 让一个正方形 变成圆圈

    border-radius: 50%;

    技术图片

  • 技术图片
  • 以上效果图矩形的圆角, 就不要用 百分比了,因为百分比会是表示高度和宽度的一半。
  • 而我们这里矩形就只用 用 高度的一半就好了。精确单位。

2. 盒子阴影(CSS3)

技术图片

  • 语法:
box-shadow:水平阴影 垂直阴影 模糊距离(虚实)  阴影尺寸(影子大小)  阴影颜色  内/外阴影;

技术图片

  • 前两个属性是必须写的。其余的可以省略。
  • 外阴影 (outset) 是默认的 但是不能写 想要内阴影可以写 inset
div {
            width: 200px;
            height: 200px;
            border: 10px solid red;
            /* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);  */
            /* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸(影子大小) 阴影颜色  内/外阴影; */
            box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);
            
}

CSS书写规范

开始就形成良好的书写规范,是你专业的开始。

空格规范

【强制】 选择器 与 { 之间必须包含空格。

示例:

.selector {
}

【强制】 属性名 与之后的 : 之间不允许包含空格, : 与 属性值 之间必须包含空格。

示例:

font-size: 12px;

选择器规范

【强制】 并集选择器,每个选择器声明必须独占一行。

示例:

/* good */
.post,
.page,
.comment {
    line-height: 1.5;
}


/* bad */
.post, .page, .comment {
    line-height: 1.5;
}

【建议】 一般情况情况下,选择器的嵌套层级应不大于 3 级,位置靠后的限定条件应尽可能精确。

示例:

/* good */
#username input {}
.comment .avatar {}

/* bad */
.page .header .login  input {}
.comment div * {}

属性规范

【强制】 属性定义必须另起一行。

示例:

/* good */
.selector {
    margin: 0;
    padding: 0;
}

/* bad */
.selector { margin: 0; padding: 0; }

【强制】 属性定义后必须以分号结尾。

示例:

/* good */
.selector {
    margin: 0;
}

/* bad */
.selector {
    margin: 0
}

CSS——05核心:盒子模型2

标签:shadow   NPU   上下   hidden   强制   css3   overflow   影子   规范   

原文地址:https://www.cnblogs.com/BM-laoli/p/12255359.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!