黑马程序员技术交流社区

标题: 【成都校区】--Html+Css笔记 [打印本页]

---

作者: 小刀葛小伦    时间: 2019-6-27 15:34
标题: 【成都校区】--Html+Css笔记


HTML+CSS笔记
一、box-shadow
默认值为0，前面两个值分别代表阴影在x轴的位移、在y轴的位移，都为0，证明阴影没有偏移，所以完全和元素重叠，看不出来。
指定单个 box-shadow 的用法：

• 给出两个、三个或四个数字值的情况：
  

• 如果只给出两个值, 这两个值将被浏览器解释为x轴上的偏移量 <offset-x> 和y轴上的偏移量 <offset-y>。
• 如果给出了第三个值, 这第三个值将被解释为模糊半径的大小 <blur-radius>。
• 如果给出了第四个值, 这第四个值将被解释为扩展半径的大小 <spread-radius>。
  

  2. 可选， 插页(阴影向内) inset。
  3. 可选， 颜色值 <color>。
二、float、定位
设置了float、absolute、fixed的元素会自动转换为块级元素（类似于行内块）
1.float
清除浮动方法：

• 给父元素设置overflow:hidden;
• 给父元素设置高
• 添加伪元素清除浮动
  

   

[CSS] 纯文本查看 复制代码

 <div class="father">

        <div class="son"></div>

    </div>



    .father {

        /* height: 200px; */ 清除浮动方式1

        /* overflow: hidden; */清除浮动方式2

        background-color: pink;

    }



    .son {

        float: left;

        width: 300px;

        height: 200px;

        background-color: purple;

    }



    /*清除浮动方式3*/

     .clearfix::after {

            display: block;

            content: "";

            clear: both;

            height: 0;

            visibility: hidden;

        }



        .clearfix {

            *zoom: 1;

            /* IE6、7 专有 */

        }

2.定位
css布局三种机制在页面中的顺序： 标准流 < 浮动 < 定位
1. 相对定位：

• 相对其原来在标准流中的位置进行定位的
• 但其原来在标准流中的位置仍然保留
  

2. 绝对定位：

• 标准流的子盒子总是以父级为标准移动位置
• 相对于其最近的父元素（祖先）并且设置了定位的元素进行定位
• 如果父盒子没有设置定位，则是以浏览器定位
• 完全脱标，不占位置
• 子绝父相
  

3. 固定定位：

• 完全脱标
• 以浏览器的可视窗口进行定位
  

• 父元素定位基准：父元素的内容区（也即是content（width+height）+padding区域，不包括border和margin。
• 子元素定位的边界是包括子元素的 整体 = margin + border + padding + content ;的margin外边界为基准进行定位。
  

总结：如果子元素设置了定位元素，但是没有设置left top 等值，子元素依然会收父元素padding值影响
三、background
1.background所有属性
background：
- background-color：背景色
- background-position：背景图片位置
- background-size：背景图片尺寸
- background-repeat：背景图片是否重复
- background-origin：背景图片定位区域
- background-clip：背景的绘制区域 border-box|padding-box|content-box  
- background-attachment：属性设置背景图像是否固定或者随着页面的其余部分滚动 scroll 默认值（滚动） fixed （不会滚动）
- background-image：背景图像

• cover：图片宽高比不变、铺满整个容器的宽高，而图片多出的部分则会被截掉
• contain:图片自身的宽高比不变，缩放至图片自身能完全显示出来，所以容器会有留白区
  

所有属性合写：
background: #00FF00 url(bgimage.gif) no-repeat fixed top;
2.设置背景色渐变

• background: linear-gradient(direction, color-stop1, color-stop2, ...);
• direction        用角度值指定渐变的方向（或角度）。
• color-stop1, color-stop2,...        用于指定渐变的起止颜色。
  

[CSS] 纯文本查看 复制代码

 background: -webkit-linear-gradient(left top, #6cc9b7, #3979cc);

3.设置字体颜色渐变

[CSS] 纯文本查看 复制代码

  background: linear-gradient(to bottom, #fff, #ccc, #FDF7EE);

  /*以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉*/

  -webkit-background-clip: text;

  /*设置字体颜色透明，这样不会遮住div的背景色*/

  color: transparent;

四、外边距和内边距


1. 外边距塌陷问题

• 相邻块元素垂直外边距的合并  尽量只给一个盒子给外边距
• 嵌套块元素垂直外边距的合并（塌陷）
  

[CSS] 纯文本查看 复制代码

/*解决嵌套块元素垂直外边距的合并问题*/

border:1px solid transparent;

padding:1px;

float:left/right

position:absolute

display:inline-block

overflow:hidden/auto

2.外边距内边距缩写时值的情况
以margin为例，padding同理

• margin为4个时，margin:上  右  下  左;（为顺时针方向）
• margin为3个时，margin:上   左=右   下;
• margin为2个时，margin:上=下   左=右;
• margin为1个时，margin:上=右=下=左;
  

五、a标签和img标签问题
练习做苏宁易购案例时，做广告图片时，发现图片下面一直有一个大的空白，最后经过各种研究发现竟然是上面设置的行高影响了，导致a的line-height为75了,把盒子撑开了，所以一直有一个行高存在。
设置行高为line-height:0;

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2