04-盒子

作者: OK_1f21 | 来源:发表于2018-07-09 15:42 被阅读0次

padding-top:100px   内边距   背景会延伸到内边距

修改内边距会影响和子的大小

padding:上下,上,左右,下 ,上右下左

margin-top:上外边距  outo自动(设置水平方向)垂直方向默认0

相当于增加了占地面积

垂直外边距重叠 (相邻的元素) 边距取最大的

垂直方向子元素会传给父元素

去掉浏览器的默认样式

body{margin:0 ; padding:}  所有*号

网页上的任何元素都是盒模型

内联元素不能设置宽和高 但可以设置内边距,不会影响周围元素 

垂直边框不影响周围元素

水平外边距求和

不能设置垂直外边距

内联元素变块元素

display : inline行内元素    block块元素

inline-block行内块 既有行内又有块元素的特点

none 不显示元素

visibility 显示

hidden 隐藏元素但保持位置

子元素默认在父元素内容区里  超出内容称为溢出

overflow:hidden    把溢出的内容减掉

scroll 超出的话滚动

auto  自动添加滚动条


文档流

处在文档最底层

块元素在文档流中自上往下显示独占一行

内联元素在文档流中只占自身大小,从左到右

没设宽度宽度百分之百;不会影响宽度大小

内联元素中的宽高都被内容撑开

inline-block  连续显示

浮动脱离文档流

float:右,左

直到遇到父元素的边框

遇到其他浮动元素也会停止

一行方不下的时候往下顶


作业:

相关文章

  • 04-盒子

    padding-top:100px 内边距 背景会延伸到内边距 修改内边距会影响和子的大小 padding:上...

  • DOM操作三

    01-访问关系封装 tools.js 02-菜单练习(利用封装方法) 03-style属性演示 04-改变盒子的大...

  • DOM-事件对象8

    04-鼠标跟随.html 05-鼠标在盒子中的坐标.html 07-拖拽案例.html 08-模拟滚动条.html...

  • dya23-CSS属性

    01-选择器的权重 02-浮动 03-文字环绕 04-清除浮动 05-display 06-定位 07-盒子模型 ...

  • 近期这个赛道不错

    -01 - - 02 - - 03 - - 04-

  • CocoaPods学习03-pod install vs pod

    CocoaPods学习01-PodfileCocoaPods学习02-PodSpecCocoaPods学习04-制...

  • 本地安装npm包

    id: installing-npm-packages-locallytitle: 04-本地安装npm包prev...

  • 李欣频创意文案04-不要卖牛排,要卖滋滋声

    李欣频创意文案04-不要卖牛排,要卖滋滋声

  • -04-

    【有着相似的遭遇】share similar experiences【对……感同身受】fully understa...

  • 四方盒子(诗)

    作者:王在 四方盒子 盒子里面是盒子 里面的盒子是盒子 我在盒子里吃饭 我在盒子里和远方的人谈恋爱 每天我都在盒子...

网友评论

      本文标题:04-盒子

      本文链接:https://www.haomeiwen.com/subject/ugxzuftx.html