CSS3-使用盒模型
<!-- 为元素应用内边距 --> <!-- padding-top: --> <!-- padding-bottom: --> <!-- padding-left: --> <!-- padding-right: --> <!-- padding: 顶 右 底 左 --> <style type = "text/css"> table { padding-top: 0.2em; padding-left: 0.2em; padding-bottom: 0.5em; padding-right: 0.2em; } </style> <style type = "text/css"> p { padding: 0.2em 0.5em 0.5em 0.2em; } </style> <!-- 为元素应用外边距 --> <!-- margin-top: --> <!-- margin-bottom: --> <!-- margin-left: --> <!-- margin-right: --> <!-- margin: --> <style type = "text/css"> p { margin: 0.2em 0.5em; } </style> <!-- 控制元素的尺寸 --> <!-- width height 宽度,高度 --> <!--min-width min-height 最小可接受宽度,高度 --> <!-- max-width max-height 最大可接受宽度,高度 --> <!-- box-sizing 设置尺寸调整应用到元素盒子的哪一部分 --> <!-- 可用属性: content-box, padding-box, border-box, margin-box --> <style type = "text/css"> p { box-sizing: border-box; width: 50%; } </style> <!-- 设置一定尺寸的盒子 --> <!-- 设置最小和最大尺寸 --> <style type = "text/css"> p { box-sizing: border-box; width: 50%; min-width: 100px; max-width: 200px; } </style> <!-- 处理溢出内容 --> <!-- overflow-x overflow-y overflow --> <!-- 可用属性: --> <!-- auto 浏览器自动处理溢出内容 --> <!-- hidden 溢出内容直接减掉 --> <!-- no-content 内容溢出就移除所有内容 --> <!-- no-display 内容溢出就隐藏所有内容 --> <!-- scroll 内容溢出添加滚动条 --> <!-- visible 默认值,溢出直接显示 --> <style type = "text/css"> p { overflow: scroll; } </style> <!-- 控制元素的可见性 --> <!-- visibility --> <!-- 可用属性: --> <!-- collapse 元素不可见,且在页面布局中不占空间 --> <!-- hidden 元素不可见,但在页面布局中占据空间 --> <!-- visible 默认值,元素可见 --> <style type = "text/css"> p { visibility: hidden; } </style> <!-- collapse值只能应用到表相关属性 --> <!-- 设置元素的盒类型 --> <!-- display --> 属性值: inline 行内元素; block 块级元素; inline-block 行内块级元素; list-item 列表项; run-in 插入元素; compact 块或标记盒; flexbox tabke inline-table table-row-group table-header-group table-footer-group table-row table-column-group table-column table-cell table-caption ruby ruby-base ruby-text ruby-base-group ruby-text-group none 元素不可见,且在页面布局中不占空间; <!-- 创建浮动盒 --> <!-- float: --> <!-- 浮动盒会将元素的左边界或者右边界移动到包含块或另一个浮动盒的边界 --> <!-- 可用属性: --> <!-- left 左边挨着包含块的左边界,或另一个浮动盒的右边界 --> <!-- right --> <!-- none 元素位置固定 --> <style type = "text/css"> p { float: left; } </style> <!-- 阻止浮动元素堆叠 --> <!-- clear --> <!-- 可用属性 --> <!-- left 元素的左边界不能挨着另外一个元素 --> <!-- right --> <!-- both 元素的左右边界都不能挨着浮动元素 --> <!-- none 元素的左右边界都可以挨着浮动元素 --> <style type = "text/css"> p { float: left; } p.cleard{ clear: left; } </style>
相关推荐
day05(CSS03-盒子模型)v1.0.pdf
CSS+DIV-盒子模型示例.zip
css基础-盒子模型
Day05-CSS布局-盒子模型
css盒模型css盒模型css盒模型css盒模型css盒模型
单元二 CSS3样式表端基础前Web单元2-6 框模型(盒子模型)13内边距框模型概述42边框外边距文档结构与标准文档流span为inline元素,若干个inline元素是水平排列的body,ul,li为block元素,它们独占一整行,兄弟之间...
同上
HTML-第七章-CSS盒子模型+排版.pdf
HTML-第七章-CSS盒子模型+排版.pptx
python 12、web前端html,css 3-2_CSS盒模型_Day03_PM.mp4
这是一个CSS的PPT CSS 盒模型,主要介绍CSS中的盒模型
每个html元素都可以看作一个装有东西的盒子,盒子里面的内容到盒子的边框之间的距离是填充...盒子本身有边框(border),而盒子边框外和其他盒子之间,是边界(margin). 填充、边框、边界都分为“上右下左”四个方向。
CSS+盒模型,css盒模型面试题,HTML源码
盒子模型新增属性;;盒子模型新增属性;盒子模型新增属性;盒子模型新增属性;盒子模型新增属性;盒子模型新增属性;盒子模型新增属性;盒子模型新增属性;盒子模型新增属性; 盒子模型新增属性;盒子模型新增属性;盒子模型...
CSS第三天-盒子模型.md
CSS+盒模型
2、掌握了CSSde 创建及管理方式和其中常用的属性,应用css+DIV进行页面布局的DIV标记,SPNA标记, 盒子模型,元素的定位方式,布局流程和常用的布局类型。 3、学会了应用SCC+DIV对"北京奥运混吉祥物——福娃"网站的...
此资源为css3弹性盒模型,里面有资源的介绍和用法,欢迎下载
1.1 CSS盒子模型概述 1.3 CSS 盒子模型边框 1.4 CSS盒子模型外边距 1.5CSS盒子模型的应用
CSS盒模型的应用知识介绍,基础的CSS盒模型教学