【css技术指南笔记】第三章盒子模型浮动清除浮动定位显示属性背景

最新推荐文章于 2024-07-14 20:21:35 发布

chuobanmi4463

最新推荐文章于 2024-07-14 20:21:35 发布

阅读量124

点赞数

原文链接：https://my.oschina.net/zhenger/blog/392111

版权

盒子模型

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) } 设置渐变起点