边框

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,作用到了父元素身上
  • 原因:同时满足四条
  1. 父元素没有上边框
  2. 父元素没有上内间距
  3. 父元素没有浮动
  4. 子元素没有浮动

清除默认样式

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,清除默认样式的更多相关文章

  1. 内联元素的盒子模型与文档流定位padding属性

            内联元素的盒子模型 1.内联元素不能设置width宽度和高度height span{width:200px ; height:200px}   与     span{width:100 ...

  2. CSS块级-内联元素,盒子模型

    CSS元素 元素分类和区别 常用的块状元素有: <div>.<p>.<h1>~<h6>.<ol>.<ul>.<li> ...

  3. 溢出处理、盒子模型、背景图片、float(浮动)

    一.overflow:溢出内容的处理     overflow:hidden;  溢出内容隐藏(在父元素内使用,可以清除子元素浮动对父元素的影响)    overflow:auto; 自动滚动(有溢出 ...

  4. #CSS的盒子模型、元素类型

    CSS的盒子模型.元素类型   本文首先介绍了CSS元素的统一内部结构模型,盒子模型:然后介绍了CSS元素基于不同分类标准定义的元素类型,包括基于不同内容设置方式定义的replaced元素和non-r ...

  5. CSS 盒子模型(Box model)中的 padding 与 margin

    本文将讲述 HTML 和 CSS 的关键—盒子模型 (Box model) .理解 Box model 的关键便是 margin 和 padding 属性,而正确理解这两个属性也是学习用 CSS 布局 ...

  6. CSS3与页面布局学习笔记(二)——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  7. 深入了解CSS中盒子模型

    CSS中盒子模型介绍 什么是盒子? 盒子是用来存储物品,我们可以将盒子理解为酒盒,酒盒有什么组成的呢? 有酒可以喝.有填充物保护酒防止酒被摔坏.纸盒子. 我们怎么理解CSS中的盒子呢,CSS中盒子有什 ...

  8. CSS基础知识(颜色、伪类、盒子模型)

    6.设置颜色单位 L    普通英文单词 {color : 属性值red;} 此方法简单,便捷.但设置的颜色在不同浏览器中,可能显示的颜色出现差异 * 三原色 - 红.绿.蓝 L   颜色的八进制方式 ...

  9. CSS(六):盒子模型

    一.什么是盒子模型 盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版. 从上图可以看到标准的盒子模型范围包括margin(外边距).border(边框).padding(内边距).con ...

随机推荐

  1. oracle函数 UPPER(c1)

    [功能]将字符串全部转为大写 [参数]c1,字符表达式 [返回]字符型 [示例] SQL> select upper('AaBbCcDd') upper from dual; UPPER --- ...

  2. 解决bootStrap selectpicker 下拉栏上方弹出

    最近项目中遇到了一个使用bootStrap selectpicker 进行下拉栏展示的时候出现在元素上方弹出展示的问题,可把我难受坏了,和测试互怼最终以失败告终(人家还是一个娇滴滴的小姑娘),在查了a ...

  3. JIRA管理员、用户密码重置

    -- Jira数据库中,用户信息都存放在表 cwd_user中 -- 切换到jiar数据库 use jiradb; -- 更改密码为sphere update cwd_user set credent ...

  4. C++高精度加减乘除模板

    其中高精度乘法通过了POJ2389,其他没有测过,不过应该是没有问题的. 其中高精度除法返回一对string,分别表示商和余数. 代码: #include <bits/stdc++.h> ...

  5. 2019-5-27-C#-很少人知道的科技

    title author date CreateTime categories C# 很少人知道的科技 lindexi 2019-05-27 19:33:36 +0800 2018-03-16 08: ...

  6. HTML--CSS样式表--基本概念(超链接的状态)

    样式表的基本概念 一.样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p style="font-size:14px;"> ...

  7. win10 uwp xaml 绑定接口

    本文告诉大家如何在 xaml 绑定属性使用显式继承接口 早上快乐 就在你的心问了我一个问题,他使用的属性是显式继承,但是无法在xaml绑定 我写了简单的代码,一个接口和属性 public class ...

  8. 2018-8-10-WPF-好看的矢量图标

    title author date CreateTime categories WPF 好看的矢量图标 lindexi 2018-08-10 19:16:53 +0800 2018-5-16 11:4 ...

  9. [转]分布式监控工具Ganglia 介绍 与 集群部署.

    如果你目的很明确就是冲着标题来的,不爱看我唠叨,请直接进入第二个分割线之后的内容. 其实之前就是有做Swift监控平台的打算的,但是因为没什么硬性需求么,也不要紧的,就一直搁置了.最近实验室来了个大二 ...

  10. es6—变量的解构赋值

    数组的解构赋值 ]]]]]]] = []}} = {}} = {}})]: first]: last} = arr} = {}) {}))}))}) {}))}))].]]]])})] }}} = { ...