盒子布局、标签特性display、浮动、定位position
盒子模型布局:
盒子模型:每个标签都是一个盒子
盒子在页面显示在大小是:自身宽度+边框+边距(内边框+外边距)
如果一个盒子设置了边框,则边框需要被加两遍。若果设置了边距则内外边距根据设置情况要被加两遍。
计算 宽高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的更多相关文章
- CSS定位机制之浮动定位float
一.浮动定位实现的效果 二.使用float实现浮动定位 三.使用clear属性清除浮动定位 四.浮动定位的应用(布局) 一.浮动定位实现的效果 (一).块元素(div)在文档流中默认垂直排列,如果 ...
- HTML+CSS教程(六)浮动-float+定位-position+居中问题
一.浮动(float)1.文档流:是指盒子按照 html 标签编写的顺序依次从上到下,从左到右排列,块元素占一行,行内元素在一行之内从左到右排列,先写的先排列,后写的排在后面,每个盒子都占据自己的位置 ...
- CSS 盒子模型、RestCSS、浮动、定位
盒子模型 边框:border 左边框:border-left 右边框:border-right 上边框:border-top 下边框:border-bottom 复合样式:border 边框颜色:bo ...
- CSS.04 -- 浮动float、overflow、定位position、CSS初始化
标准流:行内/行内块元素横向有序排列 : 块元素纵向有序排列. 浮动:Float 语法:float:left/right : 设置浮动的元素,脱离标准流 浮动的框可以向左或向右移动,直到它的外边缘碰 ...
- css盒子布局,浮动布局以及显影与简单的动画
08.05自我总结 一.盒子布局 1.盒子布局的组成 margin border padding content 2.margin margin是外边距,控制盒子的显示位置相对于他的上一级 left. ...
- 浮动和渐变色,定位position,元素的层叠顺序
浮动: float 是我们网页布局的一种 浮动 可以有 left 左浮动 right 右浮动 两种 浮动的特点: 脱离正常的文档流,原本的空间不占据,浮动的标签都具有块级标签的一些特点,可以手动设置宽 ...
- 理解浮动和position定位
前言 为了更好理解浮动和position,建议先看看我写的这篇文章<Html文档流和文档对象模型DOM理解> 正文 一.浮动 CSS设计float属性的主要目的,是为了实现文本绕排图片的效 ...
- 理解浮动和position定位(转)
前言 为了更好理解浮动和position,建议先看看我写的这篇文章<Html文档流和文档对象模型DOM理解> 正文 一.浮动 CSS设计float属性的主要目的,是为了实现文本绕排图片的效 ...
- html/css 盒子布局 Margin 、Padding 、border 以及 清除浮动的知识 (学习HTML过程中的小记录)
html/css 盒子布局 Margin .Padding .border 以及 清除浮动的知识 (学习HTML过程中的小记录) 作者:王可利(Star·星星) width 是"宽 ...
随机推荐
- windows 10 更新补丁包
http://www.catalog.update.microsoft.com/Search.aspx?q=windows%2010%20prohttp://www.catalog.update.mi ...
- 【Dubbo 源码解析】03_Dubbo Protocol&Filter
Protocol & Filter Dubbo 服务暴露和服务引用都是通过的 com.alibaba.dubbo.rpc.Protocol 来实现的.它是一个 SPI 扩展. @SPI(&qu ...
- Centos VMware 克隆后 网络配置
第一步:生产新的网卡地址,启动系统. 第二步:修改主机名(注:此处根据个人需要,不修改也行,此处我是用于搭建集群,修改主机名做区分) 执行命令:vi /etc/sysconfig/network 修改 ...
- 用SUMIF对超15位的代码进行条件求和,出错了,原因是....
用SUMIF对超15位的代码进行条件求和,出错了,原因是.... 2017-10-29 23:01 一.问题 有读者朋友问: 用SUMIF进行条件求和时,如果统计的条件是超15位的代码,就会出错,比如 ...
- Qt编写自定义控件3-速度仪表盘
前言 速度仪表盘,写作之初的本意是用来展示当前测试的网速用的,三色圆环+数码管显示当前速度,Qt自带了数码管控件QLCDNumber,直接集成即可,同时还带有动画功能,其实也可以用在汽车+工业领域等, ...
- sklearn中随机森林的参数
一:sklearn中决策树的参数: 1,criterion: ”gini” or “entropy”(default=”gini”)是计算属性的gini(基尼不纯度)还是entropy(信息增益),来 ...
- Go学习笔记(五)Go命令工具
上篇Go学习笔记(四)Go自动化测试框架 1.go build 这个命令可以直接使用,也可以带上代码包或源码文件使用. 如果是直接使用,表示试图编译当前目录所对应的代码包,如果当前目录不是一个有效的代 ...
- 查看linux系统的运行级别
查看当前系统的运行级别[root@apenglinux ~]# runlevel3 5查看系统的默认级别[root@apenglinux ~]# systemctl get-defaultgraphi ...
- [httpd] httpd server 在低负载的情况下对SYN无响应
如题: 两台client通过load balance访问httpd server.两个client交互访问.load balance处于fullnat模式. server在低负载情况下,常常对某一个c ...
- HTTP协议工作原理
HTTP简介 超文本传输协议(HTTP:Hypertext Transport Protocol)是万维网应用层的协议,它通过两个程序实现:一个是客户端程序(各种浏览器),另一个是服务器 ...