CSS笔记(二)

作者: Reatiny | 来源:发表于2020-01-20 20:58 被阅读0次

CSS笔记(二)

一、盒子模型有那四部分组成?

CSS 框模型
1.盒子边框(border)
border : border-width || border-style || border-color 
  • 边框的样式:

    • none:没有边框即忽略所有边框的宽度(默认值)
    • solid:边框为单实线(最为常用的)
    • dashed:边框为虚线
    • dotted:边框为点线
  • 边框综合设置

border : border-width || border-style || border-color 

例如:

 border: 1px solid red;  没有顺序  
  • 很多情况下,我们不需要指定4个边框,我们是可以单独给4个边框分别指定的。
2.表格的细线边框
  • 通过表格的cellspacing="0",将单元格与单元格之间的距离设置为0,

  • 但是两个单元格之间的边框会出现重叠,从而使边框变粗

  • 通过css属性:

    table{ border-collapse:collapse; }  
    

二、内边距的作用以及对盒子的影响

属性 作用
padding-left 左内边距
padding-right 右内边距
padding-top 上内边距
padding-bottom 下内边距

当我们给盒子指定padding值之后, 发生了2件事情:

  1. 内容和边框 有了距离,添加了内边距。
  2. 盒子会变大了。

三、padding设置不同数值个数分别代表的意思?

值的个数 表达意思
1个值 padding:上下左右内边距;
2个值 padding: 上下内边距 左右内边距 ;
3个值 padding:上内边距 左右内边距 下内边距;
4个值 padding: 上内边距 右内边距 下内边距 左内边距 ;

四、块级盒子居中对齐需要的2个条件?

  • 盒子必须指定了宽度(width)
  • 然后就给左右的外边距都设置为auto
header{ width:960px; margin:0 auto;}

常见的写法,以下下三种都可以。

  • margin-left: auto; margin-right: auto;
  • margin: auto;
  • margin: 0 auto;
  1. 盒子内的文字水平居中是 text-align: center, 而且还可以让行内元素和行内块居中对齐
  2. 块级盒子水平居中 左右margin 改为 auto

五、外边距合并的解决方法

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

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

(2). 嵌套块元素垂直外边距的合并(塌陷)
  • 对于两个嵌套关系的块元素,如果父元素没有上内边距及边框
  • 父元素的上外边距会与子元素的上外边距发生合并
  • 合并后的外边距为两者中的较大者
CSS 外边距合并实例 2

解决方案:

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

还有其他方法,比如浮动、固定、绝对定位的盒子不会有问题

六、插入图片和背景图片区别

  1. 插入图片 我们用的最多 比如产品展示类 移动位置只能靠盒模型 padding margin
  2. 背景图片我们一般用于小图标背景 或者 超大背景图片 背景图片 只能通过 background-position
 img {  
        width: 200px;/* 插入图片更改大小 width 和 height */
        height: 210px;
        margin-top: 30px;  /* 插入图片更改位置 可以用margin 或padding  盒模型 */
        margin-left: 50px; /* 插入当图片也是一个盒子 */
    }

 div {
        width: 400px;
        height: 400px;
        border: 1px solid purple;
        background: #fff url(images/sun.jpg) no-repeat;
        background-position: 30px 50px; /* 背景图片更改位置 我用 background-position */
    }

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

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

代码:

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

八、 盒子模型布局稳定性

  • 内边距和外边距,什么情况下用内边距,什么情况下用外边距?

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

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

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

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

相关文章

  • CSS 自学笔记(中)

    传送门: CSS 自学笔记(上) CSS 自学笔记(中) CSS 自学笔记(下) 继承、层叠和特殊性 继承 CSS...

  • CSS 自学笔记(上)

    传送门: CSS 自学笔记(上) CSS 自学笔记(中) CSS 自学笔记(下) 1. 简介 CSS 是层叠样式表...

  • CSS 自学笔记(下)

    传送门: CSS 自学笔记(上) CSS 自学笔记(中) CSS 自学笔记(下) 代码简写 布局缩写 paddin...

  • web前端笔记2:CSS入门

    学习和完成任务二的笔记任务二:零基础HTML及CSS编码(一) 学习的资料 MDN HTML入门 [MDN CSS...

  • CSS笔记(二)

    1.CSS选择器(selector) 1.1什么是CSS选择器 按照一定的规则选出符合条件的元素,为之添加CSS样...

  • CSS笔记(二)

    CSS笔记(二) 一、盒子模型有那四部分组成? 1.盒子边框(border) 边框的样式:none:没有边框即忽略...

  • CSS学习笔记(2018-07-29)

    CSS学习笔记 CSS 指层叠样式表 (Cascading Style Sheets) CSS语法 CSS 规则由...

  • js操作样式

    CSS HTML 笔记

  • CSS入门学习笔记

    CSS学习笔记 CSS= 层叠样式表 cascading style sheets HTML 表达结构 , CSS...

  • HTML笔记(二)——CSS

    CSS(层叠样式表)作用:规定HTML文档的呈现形式(外观和格式编排)。 CSS 是在HTML 4开始使用的,是为...

网友评论

    本文标题:CSS笔记(二)

    本文链接:https://www.haomeiwen.com/subject/ijhszctx.html