边框,元素居中,盒子模型,margin,display,overflow,textarea,float,浮动停止条件,清除浮动影响,margin-top的bug,清除默认样式
边框
solid实线 dotted虚线 dashed点线
盒子在页面中实际的宽高都是5部分组成
宽=borderleft+paddingleft+width+paddingright+borderright
- 在块元素中宽度auto 适配到父元素,占满
- 高度auto 由内容撑开
在文本或者行元素居中
- 在他的块父元素上加text-align:center;
- padding不能加负值
- 行元素没有上下外间距
盒子模型
- 内容content padding border margin
margin外间距
- 块元素上下会合并
- 行元素左右不会合并
- 行元素不能加上下margin
- margin可以设负值,padding不能设负值
- margin:0 auto;
- margin-top的bug
display显示
- 将一个任意元素,转换为块元素
- display: block;
- 将一个任意块元素,转换为行元素
- display: inline;
- 讲一个任意元素,从页面上删除
- display:none;
- 将任意一个元素,隐藏
- display:inline-block;
overflow溢出
- hidden;隐藏
- scroll;滚动条
- auto;超出就有滚动条,不超出就没有
- overflow-x:hidden;横向隐藏
- overflow-y:hidden;纵向隐藏
textarea文本域
- 设置宽高为最小宽高!
- resize:both;全都能动
- resize:none;固定大小,不能变了
- resize:vertical;只能垂直的拖拽
- resize:horizontal;只能水平拖拽
float浮动
- 文档流中的元素看不到浮动的元素
- 文字,图片,控件除外(进不到浮动元素下边)
浮动停止的条件
- 紧贴浮动的兄弟元素或紧贴父元素边界时
- body的直接子元素不能用浮动
- 所有能写宽高的元素都要写宽高
解决办法
- 父元素写死高度
- 父元素加overflow:hidden;
- 清除浮动所带来的影响 clear:both; /left/right
margin-top的bug
- 现象:子元素加上margin-top,作用到了父元素身上
- 原因:同时满足四条
- 父元素没有上边框
- 父元素没有上内间距
- 父元素没有浮动
- 子元素没有浮动
清除默认样式
body,p,pre,ul,ol,li,dl,dt,dd,form,input,h1,h2,h3,h4,h5,h6
{margin:0;padding:0;}
ul,li,ol,dl,dt,dd{list-style:none;}
a{text-decoration:none}
img{border:0;}
ev.stoppropagationt
边框,元素居中,盒子模型,margin,display,overflow,textarea,float,浮动停止条件,清除浮动影响,margin-top的bug,清除默认样式的更多相关文章
- 内联元素的盒子模型与文档流定位padding属性
内联元素的盒子模型 1.内联元素不能设置width宽度和高度height span{width:200px ; height:200px} 与 span{width:100 ...
- CSS块级-内联元素,盒子模型
CSS元素 元素分类和区别 常用的块状元素有: <div>.<p>.<h1>~<h6>.<ol>.<ul>.<li> ...
- 溢出处理、盒子模型、背景图片、float(浮动)
一.overflow:溢出内容的处理 overflow:hidden; 溢出内容隐藏(在父元素内使用,可以清除子元素浮动对父元素的影响) overflow:auto; 自动滚动(有溢出 ...
- #CSS的盒子模型、元素类型
CSS的盒子模型.元素类型 本文首先介绍了CSS元素的统一内部结构模型,盒子模型:然后介绍了CSS元素基于不同分类标准定义的元素类型,包括基于不同内容设置方式定义的replaced元素和non-r ...
- CSS 盒子模型(Box model)中的 padding 与 margin
本文将讲述 HTML 和 CSS 的关键—盒子模型 (Box model) .理解 Box model 的关键便是 margin 和 padding 属性,而正确理解这两个属性也是学习用 CSS 布局 ...
- CSS3与页面布局学习笔记(二)——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset
一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...
- 深入了解CSS中盒子模型
CSS中盒子模型介绍 什么是盒子? 盒子是用来存储物品,我们可以将盒子理解为酒盒,酒盒有什么组成的呢? 有酒可以喝.有填充物保护酒防止酒被摔坏.纸盒子. 我们怎么理解CSS中的盒子呢,CSS中盒子有什 ...
- CSS基础知识(颜色、伪类、盒子模型)
6.设置颜色单位 L 普通英文单词 {color : 属性值red;} 此方法简单,便捷.但设置的颜色在不同浏览器中,可能显示的颜色出现差异 * 三原色 - 红.绿.蓝 L 颜色的八进制方式 ...
- CSS(六):盒子模型
一.什么是盒子模型 盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版. 从上图可以看到标准的盒子模型范围包括margin(外边距).border(边框).padding(内边距).con ...
随机推荐
- HDU - 6534 Chika and Friendly Pairs
这个题其实也是很简单的莫队,题目要求是给一个序列,询问l-r区间内部,找到有多少对答案满足 i < j 并且 | a[ i ] -a[ j ] | <=k 也就是有多少对,满足差值小于k的 ...
- Android图形子系统
图形操作可以有两种方式实现:一是利用通用CPU模拟图形操作:二是利用GPU专门做图形操作.前者会增加CPU的负担,在现在高分辨率已经是普遍现象的时候,让通用处理器来完成大量的图形计算已经不现实.And ...
- Android 自定义ProgressDialog
Android本身已经提供了ProgressDialog进度等待框,使用该Dialog,我们可以为用户提供更好的体验:在网络请求时,弹出此框等待网络数据. 不过,既然是为了提高用户体验,我们肯定希望该 ...
- Python--day67--CBV和FBV、Request对象及上传文件示例
1,CBV版添加新的出版社 views.py文件 urls.py文件 2,Request对象: request对象 当一个页面被请求时,Django就会创建一个包含本次请求原信息的HttpReques ...
- 利用谓词实现List<>的Find等高级操作
public class Person { public int Id { get; set; } public string Name { ...
- H3C ACL的标识
- 查看php-fpm的进程和端口号
ps -ef | grep php-fpm 查看php-fpm所有的进程 ps -ef | grep php-fpn.conf 查看配置所在路径 netstat -lntp 查看监听端口 lis ...
- python基础十五之递归函数
递归函数,在函数中调用自身函数,就会形成一个递归函数.例如: def recursion(n): n += 1 print(n) recursion(n) 由于递归函数的结构,在函数调用时,它会一直调 ...
- java 使用反射操作字段
Field提供两组方法操作字段: xxx getXxx(Object obj):获取obj对象该Field的字段值,此处的xxx表示8个基本数据类型.若该字段的类型是引用数据类型则使用,Object ...
- java位运算和无符号运算
计算机在底层使用的是二进制补码进行运算. 计算规则: 正数的原码.反码.补码是其二进制本身. 负数的原码首先计算其二进制数,然后最高位使用1表示负数,反码是最高位不变其它位取反,补码是在反码的基础上进 ...