-Html+Css笔记【黑马web前端】

更新时间:2019年07月26日 10时55分02秒来源:黑马程序员论坛

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;

推荐了解热门学科

java培训	Python人工智能	Web前端培训	PHP培训
区块链培训	影视制作培训	C++培训	产品经理培训
UI设计培训	新媒体培训	产品经理培训	Linux运维
大数据培训	智能机器人软件开发

传智播客是一家致力于培养高素质软件开发人才的科技公司，“黑马程序员”是传智播客旗下高端IT教育品牌。自“黑马程序员”成立以来，教学研发团队一直致力于打造精品课程资源，不断在产、学、研3个层面创新自己的执教理念与教学方针，并集中“黑马程序员”的优势力量，针对性地出版了计算机系列教材50多册，制作教学视频数+套，发表各类技术文章数百篇。

传智播客从未停止思考

传智播客副总裁毕向东在2019IT培训行业变革大会提到，“传智播客意识到企业的用人需求已经从初级程序员升级到中高级程序员，具备多领域、多行业项目经验的人才成为企业用人的首选。”

中级程序员和初级程序员的差别在哪里?
项目经验。毕向东表示，“中级程序员和初级程序员最大的差别在于中级程序员比初级程序员多了三四年的工作经验，从而多出了更多的项目经验。“为此，传智播客研究院引进曾在知名IT企业如阿里、IBM就职的高级技术专家，集中研发面向中高级程序员的课程，用以满足企业用人需求，尽快补全IT行业所需的人才缺口。

何为中高级程序员课程?

传智播客进行了定义。中高级程序员课程，是在当前主流的初级程序员课程的基础上，增加多领域多行业的含金量项目，从技术的广度和深度上进行拓展。“我们希望用5年的时间，打造上百个高含金量的项目，覆盖主流的32个行业。”传智播客课程研发总监于洋表示。

黑马程序员热门视频教程【点击播放】

Python入门教程完整版（懂中文就能学会）	零起点打开Java世界的大门
C++\| 匠心之作从0到1入门学编程	PHP\|零基础入门开发者编程核心技术
Web前端入门教程_Web前端html+css+JavaScript	软件测试入门到精通

全国中心

-Html+Css笔记【黑马web前端】

相关阅读