文档章节

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

郑二
 郑二
发布于 2015/03/26 15:51
字数 1223
阅读 77
收藏 0

盒子模型

  • 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
作品 0
朝阳
程序员
CSS入门指南-2:盒子模型、浮动和清除

这是CSS设计指南的读书笔记,用于加深学习效果。 上一篇介绍了css 的工作原理,这一篇主要介绍和。 盒子模型 所谓盒子模型,就是浏览器为页面中的每个HTML元素生成的矩形盒子。这些盒子们都要...

goodspeed
2017/07/22
0
0
CSS清除浮动_清除float浮动

CSS清除浮动方法集合 一、浮动产生原因 - TOP 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了。 浮动产生样式效果...

单线程生物
2016/04/07
38
0
CSS入门指南-3:定位元素

这是《CSS设计指南》的读书笔记,用于加深学习效果。 前一篇CSS入门指南-2:盒子模型、浮动和清除介绍了css盒子模型、浮动和清除,这一篇介绍 css元素的定位。 定位(position) CSS 布局的核...

goodspeed
2017/07/26
0
0
端程序员入门所要学习的16个知识点

1、HTML常用标签 语言是什么 、Web前端开发语言、 HTML超文本标记语言 、 网页主体结构 、常用标签、超链接(a标签)、Img图片标签 2、盒子模型 初探Div盒子模型 、css样式、 简单css样式、盒...

急速奔跑中的蜗牛
06/07
0
0
CSS核心内容整理 - (上)

一. HTML标记与文档结构 文本用闭合标签,引用内容用自闭合标签.常见的块级标签:<h1>~<h6>,<p>,<ol>,<li>,<blockquote>等.行内标签则有:<a>,<img>,<em>,<strong>,<abbr>,<cite>,<q>等. 下面这......

顽Shi
2014/03/31
0
8

没有更多内容

加载失败,请刷新页面

加载更多

Python介绍

Python介绍 一、简介 Python是完全面向对象的语言。函数、模块、数字、字符串都是对象。并且完全支持继承、重载等,有益于增强源代码的复用性。Python相对于Lisp这种传统的函数式编程语言,P...

星汉
13分钟前
0
0
VS_设置护眼背景色

工具---->选项---->环境---->字体和颜色:

一个小妞
16分钟前
0
0
Flask跨域请求的处理方法

在Flask开发RESTful后端时,前端请求会遇到跨域的问题。下面是解决方法: 使用 flask-cors库可以很容易的解决 pip install flask-cors 两种方法,一个是全局/批量的,一个是单一独立的: 安全...

ykbj
16分钟前
2
0
Pandas学习记录-Series

系列(Series)是能够保存任何类型的数据(整数,字符串,浮点数,Python对象等)的一维标记数组。轴标签统称为索引。 pandas.Series Pandas系列可以使用以下构造函数创建 - pandas.Series( dat...

kipeng300
24分钟前
0
0
可以实现内网穿透的几款工具

最近没什么事情,看了一些关于内网穿透的文章,因我本身已是做微信开发相关的工作,对这部分关注的比较多,现分享给大家。 首先说下内网穿透的原理。 NAPT原理 在NAT网关上会有一张映射表,表...

哥本哈根的小哥
25分钟前
23
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部