2019/7/21学习内容

目标
1.表单语义化(熟悉)
2.盒子模型的使用
3.盒子坍塌和合并
4.box-sizing的使用
5.案例
1.form>input,select,textarea
form:method,action,onsubmit
type:submit 触发
2.type=text,password,hidden,checkbox,radio,submmit,reset,button,file,image
checked,value,placeholder,readonly

一.盒子:内容+padding+border+margin

内容:花瓶
padding:花瓶和盒子之间的缝隙(上下左右)内边距
border:盒子的厚度 边框
margin:盒子距离外部距离(上下左右)外边距

元素的实际宽=(margin+border+padding)x2+width
元素的实际高度=(margin+border+padding)x2+height

margin,padding,border合写:

  • border:50px solid red;
  • padding: 20px;
  • margin: 100px;

边框color分开写:

  • border-left-color: #000;

  • border-top-color: transparent;

  • border-right-color: transparent;

  • border-bottom-color: transparent;

  • border-color: pink;

边框style分开写:

  • border-top-style:dashed;

  • border-right-style:double;

  • border-bottom-style:dotted;

  • border-left-style:dotted;

  • border-style: dashed;

  • none:无边框,solid:实线边框,dashed:虚线边框
    dotted:点状边框,double:双线边框,hidden:与none相同,应用于表解决边框冲突

边框粗细分开写:

  • border-top-width: 5px;

  • border-left-width: 35px;

  • border-bottom-width: 25px;

  • border-right-width: 15px;

  • /border-width: 50px;/

  • List item

  • 圆角:border-radius: 20px;

小结
border,
border-top-color,border-color,
border-top-style,border-style,
border-top-width,border-width,
border-radiu

margin分开写:

  • margin:20px 30px

  • margin-left:10px

  • margin-bottom:20px

  • margin-right:30px;

  • margin-top:60px

padding分开写:

  • padding:10px 20px

  • padding-left:20px

问题1:父子嵌套元素在垂直方向的margin,父子元素是结合在一起的,
他们两个的margin会取其中最大的值.
正常情况下,父级元素应该相对浏览器进行定位,子级相对父级定位.
解决:
1. 给父级元素添加border
2. 触发BFC属性(独立的容器,让他不受别的元素的影响) 浮动元素 float属性值 left/right 绝对定位元素 position 为 absolute、fixed display 为inline-block overflow 为 hidden,auto,scroll*

问题2: 两个兄弟结构的元素在垂直方向上的margin是合并的
解决:
1. 给box2加上一层父级元素并加上overflow:hidden;
2. 只设置上面的元素的margin-bottom来解决距离的问题

小结: margin,padding,border,margin垂直方向的问题

pc:1000-1200px 居中 margin:0 auto

box-sizing:
content-box
盒子的实际宽度(css width值)和高度(css height值)仅应用于元素内容,不包括内边距和边框
border-box
盒子的实际宽度(css width值)和高度(css height值)包括元素内容、边框和内边距

你可能感兴趣的:(HTML+CSS)