首页
Search
1
pc端小米官网首页部分练习
659 阅读
2
js中的内置对象
619 阅读
3
CSS实现动画效果
597 阅读
4
DOM(节点操作children-自定义属性-)
576 阅读
5
CSS中的选择器
549 阅读
HTML
标签
JAVAScript
js数组
js函数
js基础
js循环
js对象
DOM
CSS
VUE
exercise
js练习
HTML/CSS练习
登录
Search
标签搜索
冒泡排序
css
float
clear
边框
字体
font
meta标签
声明bianl
标识符
Number
数据类型
css常用选择器
css关系选择器
css属性选择器
css伪类选择器
css伪元素
css选择器的权重
a元素的伪类
浮动
Typecho
累计撰写
35
篇文章
累计收到
0
条评论
今日撰写
0
篇文章
首页
栏目
HTML
标签
JAVAScript
js数组
js函数
js基础
js循环
js对象
DOM
CSS
VUE
exercise
js练习
HTML/CSS练习
页面
用户登录
登录
搜索到
1
篇与
的结果
2021-12-05
盒子模型--水平方向布局--垂直方向布局
水平方向布局元素的水平方向的布局 元素在其父元素中水平方向的位置由以下几个属性共同决定margin-leftborder-leftpadding-leftwidthpadding-rightborder-rightmargin-right一个元素在其父元素中,水平居中必须满足以下的等式 margin-left 加 border-left 加 padding-left 加 width 加 padding-right 加 border-right 加 margin-right = 父元素内容区的宽度(必须满足) width为200px 0 + 0 + 0 + 200 + 0 + 0 + 0 = 800 0 + 0 + 0 + 200 + 0 + 0 + 600=800 margin-left和width都为200,没有auto 200 + 0 + 0 +200 + 0 + 0 + 0 =800 200 + 0 + 0 +200 + 0 + 0 + 400 =800 以上等式必须满足,如果相加结果使等式不成立,则称为过渡约束,则等式会自动调整 -调整的情况 -如果这七个值中没有 auto 的情况,则浏览器会自动调整margin-right值以使等式 -这七个值中有三个值和设置为auto width margin-left margin-right - 如果某个值为auto,则为自动调整auto的那个值以使等式成立0 + 0 + 0 + auto + 0 + 0 + 0 =800 auto=800 width : auto 0 + 0 + 0 + auto + 0 + 0 + 200 =800 auto=600 width : auto 200 + 0 + 0 + auto + 0 + 0 + 200 =800 auto=400 width :auto auto + 0 + 0 + 200 + 0 + 0 + auto =800 auto=300 margin-left 和 margin-right为auto - 如果将一个宽度和一个外边距设置为auto,则宽度会调整到最大,设置auto的外边距会自动为0 - 如果将三个值都设置为auto,则外边距都是0,宽度最大 - 如果将两个外边距设置auto,宽度固定值,则会将外边距设置为相同的值 所以我们经常利用这个特点来使一个元素在其父元素中水平居中 示例: width:xxxpx; margin:0 auto;垂直方向布局 使用overflow属性来设置子元素溢出问题 可选值:visible:默认值,正常溢出scroll:生成两个滚动条,通过滚动条来查看完整的你内容auto:根据需要生成滚动条display 用来设置元素显示类型 可选值inline 将元素设置为行内元素block 将元素设置为块元素inline-block 将元素设置为行内块元素行内块,既可以设置宽度和高度又不会独占一行table 将元素设置为一个表格none 元素不在页面中显示visibility 用来设置元的显示状态 可选值:visible 默认值,元素在页面中正常显示hidden 元素在页面中隐藏 不显示,但是依然占据页面位置
2021年12月05日
374 阅读
0 评论
0 点赞