文档章节

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

郑二
 郑二
发布于 2015/03/26 15:51
字数 1223
阅读 76
收藏 0
点赞 0
评论 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清除浮动_清除float浮动

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

单线程生物
2016/04/07
38
0
CSS入门指南-2:盒子模型、浮动和清除

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

goodspeed
2017/07/22
0
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
前端开发笔记(4)css基础(下)

标签定位 相对定位 相对定位是用来微调元素位置的,让元素相对于原来的位置进行调整。 绝对定位 绝对定位比相对定位更灵活 绝对定位脱离标准流:绝对定位的盒子,是脱离标准文档流的。所以,...

lxq_xsyu
2016/11/24
0
0
css中float和position属性

盒子的三种定位形式 在标准流下的定位 在浮动属性下的定位 在定位属性下的定位 除非设置浮动属性或定位属性,否则所有盒子都是在标准流中定位 顾名思义,标准流中元素盒子的位置由元素在HTM...

RanoB
2016/12/26
14
0
CSS布局学习

以前对CSS布局有些接触,但是因为没有系统的学习过,导致每次在调整和修改起来都觉得比较困难,为了解决这个难啃的骨头花了两天时间系统的把目前比较主流的CSS布局方式系统的看了一遍,解决了...

颭夏
2017/02/19
0
0
想要清晰的明白(一): CSS视觉格式化模型|盒模型|定位方案|BFC

视觉格式化模型 页面(文档树)可以想象成是由一个个的Box组合而成的,而视觉格式化模型(Visual formatting model)是一套规则,将这些框布局成访问者看到的样子。 哪些因素控制了这些布局 下文...

mooonx
2017/11/29
0
0
CSS篇-CSS小技巧与注意手记(二)

一 : float/绝对定位/固定定位 可以让元素默认转换为行内块元素 元素的大小完全取决于定义的大小或者默认的内容多少浮动根据元素书写的位置来显示相应的浮动。 只给盒子一个高度 效果 当我们...

TianTianBaby223
07/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

机器学习管理平台 MLFlow

最近工作很忙,博客一直都没有更新。抽时间给大家介绍一下Databrick开源的机器学习管理平台-MLFlow。 谈起Databrick,相信即使是不熟悉机器学习和大数据的工程湿们也都有所了解,它由Spark的...

naughty
今天
0
0
idea tomcat 远程调试

tomcat 配置 编辑文件${tomcat_home}/bin/catalina.sh,在文件开头添加如下代码。    CATALINA_OPTS="-Xdebug -Xrunjdwp:transport=dt_socket,server=y,suspend=n,address=7829" Idea端配......

qwfys
今天
1
0
遍历目录下的文件每250M打包一个文件

#!/usr/bin/env python # -*- utf-8 -*- # @Time : 2018/7/20 0020 下午 10:16 # @Author : 陈元 # @Email : abcmeabc@163.com # @file : tarFile.py import os import tarfile import thr......

寻爱的小草
今天
1
0
expect同步文件&expect指定host和要同步的文件&构建文件分发系统&批量远程执行命令

20.31 expect脚本同步文件 expect通过与rsync结合,可以在一台机器上把文件自动同步到多台机器上 编写脚本 [root@linux-5 ~]# cd /usr/local/sbin[root@linux-5 sbin]# vim 4.expect#!/...

影夜Linux
今天
1
0
SpringBoot | 第九章:Mybatis-plus的集成和使用

前言 本章节开始介绍数据访问方面的相关知识点。对于后端开发者而言,和数据库打交道是每天都在进行的,所以一个好用的ORM框架是很有必要的。目前,绝大部分公司都选择MyBatis框架作为底层数...

oKong
今天
13
0
win10 上安装解压版mysql

1.效果 2. 下载MySQL 压缩版 下载地址: https://downloads.mysql.com/archives/community/ 3. 配置 3.1 将下载的文件解压到合适的位置 我最终将myql文件 放在:D:\develop\mysql 最终放的位...

Lucky_Me
今天
2
0
linux服务器修改mtu值优化cpu

一、jumbo frames 相关 1、什么是jumbo frames Jumbo frames 是指比标准Ethernet Frames长的frame,即比1518/1522 bit大的frames,Jumbo frame的大小是每个设备厂商规定的,不属于IEEE标准;...

问题终结者
今天
2
0
expect脚本同步文件expect脚本指定host和要同步的文件 构建文件分发系统批量远程执行命令

expect脚本同步文件 在一台机器上把文件同步到多台机器上 自动同步文件 vim 4.expect [root@yong-01 sbin]# vim 4.expect#!/usr/bin/expectset passwd "20655739"spawn rsync -av ro...

lyy549745
今天
1
0
36.rsync下 日志 screen

10.32/10.33 rsync通过服务同步 10.34 linux系统日志 10.35 screen工具 10.32/10.33 rsync通过服务同步: rsync还可以通过服务的方式同步。那需要开启一个服务,他的架构是cs架构,客户端服务...

王鑫linux
今天
1
0
matplotlib 保存图片时的参数

简单绘图 import matplotlib.pyplot as pltplt.plot(range(10)) 保存为csv格式,放大后依然很清晰 plt.savefig('t1.svg') 普通保存放大后会有点模糊文件大小20多k plt.savefig('t5.p...

阿豪boy
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部