【css技术指南笔记】 第三章 盒子模型 浮动 清除浮动 定位 显示属性 背景
博客专区 > 郑二 的博客 > 博客详情
【css技术指南笔记】 第三章 盒子模型 浮动 清除浮动 定位 显示属性 背景
郑二 发表于3年前
【css技术指南笔记】 第三章 盒子模型 浮动 清除浮动 定位 显示属性 背景
  • 发表于 3年前
  • 阅读 76
  • 收藏 0
  • 点赞 0
  • 评论 0

【腾讯云】买域名送云解析+SSL证书+建站!>>>   

摘要: CSS 盒子模型 浮动 清除浮动 定位 显示属性 背景

盒子模型

  • width:auto 时,假设实际元素是浏览器中的width值为200px,当增加 css{margin:10px;border:1px;padding:10px;} 后,元素整体的宽度还是 200px,会挤压元素的显示区域;

  • width:200px 时,即设置了具体的宽度,当增加 css{margin:10px;border:1px;padding:10px;} 后,元素整体的宽度变为是 200+(10+1+10)*2 = 222px,会一直维护元素的显示区域为200px;

  • CSS3 新增box-sizing 属性,即将元素宽度设置为具体值之后,会保持元素的整体宽度不变;

    • box-sizing:content-box; 内容盒子,默认值,正常模式,border 和 padding 都会计算到整个宽度上;

    • box-sizing:padding-box; 内边框盒子,如果设置了width:100px;padding:10px;border:1px; 则最后浏览器显示的结果为:显示真正内容的的宽度只有80px, 而整个元素的宽度为102px;

    • box-sizing:border-box; 边框盒子,如果设置了width:100px;padding:10px;border:1px; 则最后浏览器显示的结果为:显示真正内容的的宽度只有78px, 而整个元素的宽度仍然为100px;


浮动和清除

  • 浮动会让紧跟其后的元素在空间允许的情况下,向上提升与浮动元素平起平坐,如果想清除这种影响,使用   clear 清除即可;

  • 使父元素包围住浮动元素的三个方法

    • 设置父元素 {overflow:hidden;}

    • 设置父元素也浮动

    • 在最后添加一个非浮动元素,也有两种方式:    

      • 在最后写一个无意义的div,设置样式为{clear:both}

      • 既然是在最后添加元素,则可以利用在父元素设置 :after 伪元素来实现,

        .clearfix:after{

            content:" ";

            dispaly:block;

            height:0;

            visibility:hidden;

            clear:both;

        }


定位

  • relative 相对定位,相对于自己原位置进行定位,注意元素的初始占位会保留

  • absolute 绝对定位,元素的初始占位不会被保留(连根拔起),定位相对于最靠近的 position:relative的祖先元素,如果没有符合要求的,最后相对于body定位。

  • fix 固定定位,元素初始占位不会呗保留,定位相对于屏幕,意思是元素不会随着页面滚动儿移动,一直会在视线内;


显示属性

  • display:none; 会使元素完全的从文档消失

  • visibility:hidden; 元素的初始占位会保留

背景

  • 元素分为三层,最前面的是内容、中间是背景图、最后是纯颜色背景


  • background-image:url("img/my.jpg"); 引入图片

  • background-repeat:repeat 默认值,x,y 轴上都重复; repeat-x 横轴重复; repeat-y; no-repeat;

    • 还有两个 CSS3 的属性,round 确保图片不被剪切,调整图片大小

    • space 确保图片不被剪切,在图片见添加空白

  • background-position,设图片开始的起点。 top,left,bottom,right,center(可以两两之间进行组合,例如top left);还可以使用百分数,50% 50%,表示以中间为起点,第一个值为x坐标,如果只写一个值(30%)则第二个在默认为center(50%)

  • background-size

    • 50% 缩放图片,使其填充背景区域的一半

    • 100px 50px 使背景图的宽为100px,高为50px

    • cover 拉大图,使其完全填满背景区域,保持宽高比,有可能图片的有些部分看不到

    • contain 缩放图片,使其恰好适合背景区域,保持宽高比,使图片的宽或高顶满背景区域

  • background-attachment,默认scroll,随浏览器滚动;fixed,不随浏览器滚动

  • 简写:body{background:url(img/my.jpg) center #444 no-repeat contain fixed}

  • CSS3 新增属性

    • background-clip 控制背景图的剪裁区域,就是有些背景图会被剪切

      • border-box 默认值,border(不含)以外都会被裁

      • padding-box padding(不含)以外都会被裁

      • content-box 内容以外的背景都会被裁

      • text 文字字体部分以外的部分被裁,类似给文字贴上皮肤一样

    • background-origin 背景图开始出现的地方

      • border-box border(含)开始显示图片

      • padding-box 默认

      • content-box

  • 多背景图,!先列出的图片图层在更上面

        {

            background:url(img/1.jpg) 30px -10px no-repeat,

                url(img/2.jpg) 145px 0px no-repeat,

                url(img/3.jpg) 140px -30px no-repeat, #444;

        }

  • 背景渐变

    • 线性渐变

      • {background:linear-gradient(#e86a43, #fff);} 默认从上到下渐变

      • {background:linear-gradient(left, #e86a43, #fff);}从左到右

      • {background:linear-gradient(-45deg, #e86a43, #fff);}左上到右下

    • 带渐变点的

      • {background:linear-gradient(#64d1dd 20%, #fff 60%)} 从上到下渐变,有两个渐变点,20% 表示从20%的地方开始渐变,到60%的地方停止渐变(到达终点颜色)

    • 放射性渐变

      • {background:radial-gradient:(#fff, #64d1dd, #70aa25) } 以中心为原点,往外扩散形成渐变

      • {background:radial-gradient:(circle, #fff, #64d1dd, #70aa25) } 以正圆向外渐变

      • {background:radial-gradient:(20px 30px, circle, #fff, #64d1dd, #70aa25) } 设置渐变起点


  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 0
博文 18
码字总数 4318
×
郑二
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: