10.6学习CSS笔记

.元素的显示模红式

●块元素(block)又称：块级元素特点：

1.在页而中独占一行，不会与任何元素共用一行，是从上到下排列的

2.默认宽度：撑满父元素  3.默认高度：由内容撑开

4.可以通过CSS设置宽高

●行内元素(inline)
又称:内联元素
特点:
1.在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列.
2.默认宽度:由内容撑开，
3、默认高度:由内容撑开，
4、无法通过css 设置宽高,
●行内块元素(inline-block)
又称:内联块元素
特点:
1.在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列,
2.默认宽度:由内容撑开,
3.默认高度:由内容撑开
4.可以通过Css设置宽高

代码距离

 div {

            width: 200px;

            height: 200px;

            font-size: 20px;

            display: inline-block;

        }

5盒子模型的组成CSS会把所有的HTML元资都看成一个盒子，所有的样式也都是蒸于这个盒子，1.margin(外边距)：盒子与外界的距离。

2.border(边框)：盒子的边框。

3.padding(内边距)：紧贴内容的补白区域，

4.content(内容)：元素中的文本或后代元素都是它的内容.

 div {

            width: 200px;

            /* min-width 最小宽度是你规定但是视口有默认规定

            max-width 最小宽度 */

            height: 200px;

            background-color: skyblue;

        }

7.关于默认宽度所谓的默认宽度，就是不设置width属性时，元素所星现出来的宽度（此时margin对盒子的宽度是有影响的）。

总宽度=父的content一自身的左右margin,内容区的宽度=父的content-自身的左右margin-自身的左右border-自身的左右padding

盒子的内边距padding

/* padding为内边，也可以设置左右上下 表示方式为：padding-left padding-right padding-top padding-bottom */

            padding: 20px;

/* 复合属性：写一个值代表四个边为20px 写两个值代表先上下 后左右，三个值代表上 左右 下

四个值为顺时针上下左右*/

注意点：

1.padding的值不能为负数。

2.行内元素的左右内边是没问题的，上下内边不完美的设置。

3.块级元素、行内块元素，四个方向内边距都可以0以完美设置

margin的注意点

/* 1子元素margin是参考父元素的content计算的 */

<!-- 2上和左margin会影响自身的位置 下和有margin会影响兄弟元素的位置 -->

<!-- 3对于行内元素来说，左右的margin是可以完美是设置的，上下的margin设置后是无效的 -->

 <!-- 4margin的值可以是auto对于块级元素margin的左右设置为auto会实现在其父元素中的水平居中 -->

 <!-- 5margin的值可以是负数值 -->

outer {

       width:400px;

       height:400px;

       background-color:gray；

       border:10px solid transpare

      padding:10px;

     overflow:hidden;（红色为解决方法）

margin的合并问题

只存在于上下margin之间，不存在于左右之间

<style>

        #d1 {

            width: 100px;

            height: 100px;

            font-size: 15px;

            background-color: aquamarine;

            overflow: hidden;（一定要加在容器中，谁包含文字就加在谁身上）

        }

        #d2 {

            width: 200px;

            background-color: chartreuse;

        }

    </style>

span没有默认样式

1.行内元素、行内块元素，可以被父元素当做文本处理。

2.如何让子元素，在父亲中水平居中：

1>.若子元素为块元素，给父元素加上：margin:0 auto;。

 2>. 若子元素为行内元素、行内块元素，给父元素加上：text-align:center。

3.如何让子元素，在父亲中垂直居中：

1>.若子元素为块元素，给子元素加上：margin-top（如果发生了margin的塌陷问题就给父元素加上overflow：hidden）值为：（父元素content-子元素盒子总高）➗️2。

2>.若子元素为行内元素、行内块元素：让父元素的height=line-height,每个子元素都加上：vertical-align:middle;

补充：若想绝对垂直居中，父元素font-size设置为6。

17.行内块的幽灵空白问题

      产生原因：行内快元素与文本的基线对齐，而文本的蒸线与文本最底送之间是有一定距离的。解决方案：

1.方案一：给行行内块设置vertical,值不为baseline即可，设置为middel、bottom、top均可.

2.方案二：若父元素中只有一张图片，设置图片为display:block.3.方案三：

3.方案三：给父元素设置font-size:0。如果该行内块内部还有文本，则需单独设置font-size

/* 第一种给父亲+height="72px" */

            /* 第二种给父亲+float:left */

            /* 第三种止痛片：overflow： */

/* 第四种clear消除所有float产生的影响 */

        /* clear的前提是box4没有浮动，且不是行内元素 */

5.方案五：给浮动元素的父元素，设置伪元素，通过伪元清除浮动，原理与方案四相同。>推荐使用.

parent:after

{content:":display:block:clear:both;

}

布局中的一个原则：设置浮动的时候，兄弟元素要么全都浮动，要么全都不浮动。