盒子模型布局:

盒子模型:每个标签都是一个盒子

盒子在页面显示在大小是:自身宽度+边框+边距(内边框+外边距

如果一个盒子设置了边框,则边框需要被加两遍。若果设置了边距则内外边距根据设置情况要被加两遍。

计算 宽高box-sizing: border-box;(意义是将盒子大小定死,不会再因边距边框大小改变。)

设置上一行属性后,盒子宽度就是width,里面内容自适应。(计算的时候不再需要加边框和边距。)

从里到外:

padding(内边距): 属性值的前后顺序代表了上右下左的属性值。

上右下左   上(左右)下  (上下)(左右)   全部

border(边框:每一个边都可以设置):

width大小

style样式

color颜色

radius(角): 左上(顺时针,百分比形式50%  0%  0%  0%)

margin(外边距):  上右下左   上(左右)下  (上下)(左右)   全部

(margin:auto;居中属性正对于块标签。)

box-shadow(盒子阴影外,向外加inset):水平偏移量 上下偏移量 清晰度 阴影的面积  颜色  (inset属性加在最后)

h-shadow:水平阴影位置。允许负值。

v-shadow:垂直阴影位置。允许负值。

text-shadow(字体阴影): 水平偏移量  上下偏移量  清晰度  阴影面积  颜色

布局:

浮动:float

overflow:hidden 超出部分处理方式

overflow-y:scroll 滚动条

标签特性:display :

inline       行

不能设置宽高,默认不占一行

block        块  (margin:auto;居中属性正对于块标签。)

能设置宽高,默认占一行

inline-block 行内块

能设置宽高,默认不占一行

none

display:none         隐藏

标签位置没了。宽高都没了,但是还在。网页可检查到。

visibility:hidden;

标签位置还在,只是遮挡。宽高都在,页面无法看到。

opacity:数值(0~1);

透明度,但标签和子标签都透明

如果只需要背景半透,字体不变

                                     则需要直接设置背景色,background:rgba();

                                     rgba(0~255,0~255,0~255,透明度(0~1));

布局:

浮动:float

overflow:hidden 超出部分处理方式(将超出的部分隐藏掉)

overflow-y(x):scroll 隐藏并处滚动条,y是垂直方向,x是水平方向。

定位position:

fixed       绝对定位,相对于屏幕定位,保持在屏幕的位置不变。

设置fixed,标签位置没了(最高层)

top:0px;left:10px;right:20px;bottom:30px;此处为在页面的定位位置。(一般只设两个,上下各一个,左右各一个,避免冲突。)

z-index:层数:层数越高,显示在最前面。(前面的图片会挡住下一层的图片)

补充:background-attachment:scroll;是设置背景图片位置不动,滑动滚动条无变化。

relative    相对定位,相当于自己定位

形式的移动,原位置不变!!!

会移动,微调 +-不要超过20px。

<div style="width: 100px;height: 100px;background-color: #ccc;position: relative;left:10px;top:10px;"></div>,设置top,bottom,left,right属性来调节位置。

最主要的!!!限制absolute

absolute    绝对定位,相对于body(页面定位)

标签位置也没了

相对于最近的有position属性的父标签,最顶级是body.

<div style="width: 200px;height: 200px;background-color: #ccc;position: relative;">

<div style="width: 100px;height: 100px;background-color: red;position: absolute;top: 0px;">

top,left,right,bottom

z-index:层数

盒子布局、标签特性display、浮动、定位position的更多相关文章

  1. CSS定位机制之浮动定位float

    一.浮动定位实现的效果 二.使用float实现浮动定位 三.使用clear属性清除浮动定位 四.浮动定位的应用(布局) 一.浮动定位实现的效果   (一).块元素(div)在文档流中默认垂直排列,如果 ...

  2. HTML+CSS教程(六)浮动-float+定位-position+居中问题

    一.浮动(float)1.文档流:是指盒子按照 html 标签编写的顺序依次从上到下,从左到右排列,块元素占一行,行内元素在一行之内从左到右排列,先写的先排列,后写的排在后面,每个盒子都占据自己的位置 ...

  3. CSS 盒子模型、RestCSS、浮动、定位

    盒子模型 边框:border 左边框:border-left 右边框:border-right 上边框:border-top 下边框:border-bottom 复合样式:border 边框颜色:bo ...

  4. CSS.04 -- 浮动float、overflow、定位position、CSS初始化

    标准流:行内/行内块元素横向有序排列 : 块元素纵向有序排列. 浮动:Float 语法:float:left/right :  设置浮动的元素,脱离标准流 浮动的框可以向左或向右移动,直到它的外边缘碰 ...

  5. css盒子布局,浮动布局以及显影与简单的动画

    08.05自我总结 一.盒子布局 1.盒子布局的组成 margin border padding content 2.margin margin是外边距,控制盒子的显示位置相对于他的上一级 left. ...

  6. 浮动和渐变色,定位position,元素的层叠顺序

    浮动: float 是我们网页布局的一种 浮动 可以有 left 左浮动 right 右浮动 两种 浮动的特点: 脱离正常的文档流,原本的空间不占据,浮动的标签都具有块级标签的一些特点,可以手动设置宽 ...

  7. 理解浮动和position定位

    前言 为了更好理解浮动和position,建议先看看我写的这篇文章<Html文档流和文档对象模型DOM理解> 正文 一.浮动 CSS设计float属性的主要目的,是为了实现文本绕排图片的效 ...

  8. 理解浮动和position定位(转)

    前言 为了更好理解浮动和position,建议先看看我写的这篇文章<Html文档流和文档对象模型DOM理解> 正文 一.浮动 CSS设计float属性的主要目的,是为了实现文本绕排图片的效 ...

  9. html/css 盒子布局 Margin 、Padding 、border 以及 清除浮动的知识 (学习HTML过程中的小记录)

    html/css  盒子布局 Margin .Padding .border 以及 清除浮动的知识 (学习HTML过程中的小记录) 作者:王可利(Star·星星) width     是"宽 ...

随机推荐

  1. windows 10 更新补丁包

    http://www.catalog.update.microsoft.com/Search.aspx?q=windows%2010%20prohttp://www.catalog.update.mi ...

  2. 【Dubbo 源码解析】03_Dubbo Protocol&Filter

    Protocol & Filter Dubbo 服务暴露和服务引用都是通过的 com.alibaba.dubbo.rpc.Protocol 来实现的.它是一个 SPI 扩展. @SPI(&qu ...

  3. Centos VMware 克隆后 网络配置

    第一步:生产新的网卡地址,启动系统. 第二步:修改主机名(注:此处根据个人需要,不修改也行,此处我是用于搭建集群,修改主机名做区分) 执行命令:vi /etc/sysconfig/network 修改 ...

  4. 用SUMIF对超15位的代码进行条件求和,出错了,原因是....

    用SUMIF对超15位的代码进行条件求和,出错了,原因是.... 2017-10-29 23:01 一.问题 有读者朋友问: 用SUMIF进行条件求和时,如果统计的条件是超15位的代码,就会出错,比如 ...

  5. Qt编写自定义控件3-速度仪表盘

    前言 速度仪表盘,写作之初的本意是用来展示当前测试的网速用的,三色圆环+数码管显示当前速度,Qt自带了数码管控件QLCDNumber,直接集成即可,同时还带有动画功能,其实也可以用在汽车+工业领域等, ...

  6. sklearn中随机森林的参数

    一:sklearn中决策树的参数: 1,criterion: ”gini” or “entropy”(default=”gini”)是计算属性的gini(基尼不纯度)还是entropy(信息增益),来 ...

  7. Go学习笔记(五)Go命令工具

    上篇Go学习笔记(四)Go自动化测试框架 1.go build 这个命令可以直接使用,也可以带上代码包或源码文件使用. 如果是直接使用,表示试图编译当前目录所对应的代码包,如果当前目录不是一个有效的代 ...

  8. 查看linux系统的运行级别

    查看当前系统的运行级别[root@apenglinux ~]# runlevel3 5查看系统的默认级别[root@apenglinux ~]# systemctl get-defaultgraphi ...

  9. [httpd] httpd server 在低负载的情况下对SYN无响应

    如题: 两台client通过load balance访问httpd server.两个client交互访问.load balance处于fullnat模式. server在低负载情况下,常常对某一个c ...

  10. HTTP协议工作原理

    HTTP简介        超文本传输协议(HTTP:Hypertext Transport Protocol)是万维网应用层的协议,它通过两个程序实现:一个是客户端程序(各种浏览器),另一个是服务器 ...