盒子模型布局:

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

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

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

计算 宽高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. ELK日志收集

    目前日志的痛点 运维要经常登陆到服务器上拿日志给开发.测试 每次都是出问题后才去看日志,不能提前通过日志预判问题 如果是集群服务,日志将要从多台机器取 开发人员搞出来的日志不规范,没有标准.日志目录不 ...

  2. VS F5不编译 F5总是重新编译

    遇到奇怪的现象,F5不编译了 右键解决方案-配置管理器-确保项目的生成被勾选 另外一个情况,即使不修改任何代码,每次点击“生成”或者F5,都会重新编译(Debug模式没问题,Release有这个问题, ...

  3. Linux块设备IO子系统(一) _驱动模型

    块设备是Linux三大设备之一,其驱动模型主要针对磁盘,Flash等存储类设备,块设备(blockdevice)是一种具有一定结构的随机存取设备,对这种设备的读写是按块(所以叫块设备)进行的,他使用缓 ...

  4. hbase region still in transition

    1,删除hbase中的 hbase:meta表中相应的region的row 如; get 'hbase:meta','kylin_metadata,,1481101316881.f3b4c7c1148 ...

  5. 【Zookeeper系列】ZooKeeper管理分布式环境中的数据(转)

    原文地址:https://www.cnblogs.com/sunddenly/p/4092654.html 引言 本节本来是要介绍ZooKeeper的实现原理,但是ZooKeeper的原理比较复杂,它 ...

  6. [Codis] Codis3部署流程

    #0 前言 最近因为项目需要,研究了一下传说中的Codis.下面跟大家分享Codis3的搭建流程 https://github.com/CodisLabs/codis #1 Codis是什么 官方的介 ...

  7. linux的PAM认证和shadow文件中密码的加密方式

    它是一种统一的认证方案.PAM 让您能随时改变您的认证方法以及需求,并且不需要重新编译任何代码就封装了所有本地认证方法.具体见 PAM 网站. 对于 PAM 您只需要做: 对您的密码采用不同于 DES ...

  8. PHP异步请求之fsockopen()方法详解

    正常情况下,PHP执行的都是同步请求,代码自上而下依次执行,但有些场景如发送邮件.执行耗时任务等操作时就不适用于同步请求,只能使用异步处理请求. 场景要求: 客户端调用服务器a.php接口,需要执行一 ...

  9. hibernate04--三种状态之间的转换

    public class StudentTest { Session session=null; Transaction transaction=null; //在执行测试方法之前 先执行before ...

  10. mui APP与服务器之间的交互原理

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...