【Web开发基础】第五章-CSS-BOX盒子1

Web开发一第六章CSS盒子模型本讲目标理解盒子模型掌握盒子模型的各项属性理解行内元素、块级元素的概念掌握盒子模型的应用本节内容盒子模型盒子模型的各项属性块级元素与行内元素盒子模型的应用盒子盒子：一个容器内部装入各类物品（内容）要展示的物品（内容）较多时，盒子与盒子嵌套或堆叠起来，共同展示Web中的盒子模型Web中的盒子：一个矩形区域，内容包裹在盒子中。盒子的堆叠与嵌套形成整个页面的内容排布。Web中的盒子模型盒子在Web中的作用：页面内容的容器通过盒子与盒子的嵌套、堆叠，控制页面内容的展示位置（布局）盒子模型特征每个盒子具有的特征：大小（width、height）边框（border）内边距（padding）外边距（margin）盒子模型特征盒子模型特征：（宽、高、边框、内边距、外边距）本节内容盒子模型盒子模型的各项属性块级元素与行内元素盒子模型的应用内容区域左边框右边框上边框下边框上内边距下内边距左内边距右内边距左外边距右外边距上外边距下外边距盒子模型的平面图宽度高度页面元素，可以是表格、段落、列表、图片、文字、媒体等。大小widthheight内容区域边框：border用于限定盒子的外围边框demo6-1.html边框的宽度：边框的样式：边框的颜色：border-width:5px;border-style:solid;border-color:red;边框组成边框组成border-top上边框border-right右边框border-bottom下边框border-left左边框边框宽度设置边框宽度border-width:宽度值；border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;?边框颜色设置边框颜色border-color:颜色值；border-top-color:#cccccc;border-right-color:#cccccc;border-bottom-color:#cccccc;border-left-color:#cccccc;?边框样式设置边框样式border-style:样式关键词；border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;?边框样式关键字border-top-widthborder-right-widthborder-bottom-widthborder-left-widthborder-width:20pxborder-width:20px10pxborder-width:20px10px20px10pxborder-colorborder-style复合（一）时针上右下左上下左右border:width/style/color;border-width:3px;border-style:dotted;border-color:#ff9900;复合（二）border-bottom:3pxdotted#FF9900;border-left:5pxsolid#66CC33;border-right:3pxdouble#FF66FF;border-top:5pxdashed#0099FF;border:1pxsolid#cccccc;实例内边距：padding用于控制内容部分与边框的间距padding-top上间距padding-right右间距padding-bottom下间距padding-left左间距内边距举例说明添加内边距demo6-2.html外边距：margin用于控制盒子之间的间距margin-top上间隔margin-right右间隔margin-bottom下间隔margin-left左间隔外边距举例说明盒子模型计算问题contentpadding-toppadding-bottompadding-leftpadding-rightborder-topborder-bottomborder-rightborder-leftmargin-rightmargin-leftmargin-topmargin-bottomwidthheightbox=width/height+border+padding+margin本节内容盒子模型盒子模型的各项属性块级元素与行内元素盒子模型的应用块级元素与行内元素哪些元素具有盒子模型的特征？p/pul/ul…哪些元素不具有盒子模型的特征？a/a…HTML的块级元素与行内元素根据HTML元素的显示特征，可分为：块级元素（blocklevelelement）•元素在显示时会独占一行，并同时具有宽、高、内外边距特征。•举例：p行内元素（inlineelement）•在显示时通常不会以新行开始，横向排列，到最右端自动折行。•举例：aHTML常见的块级元素和行内元素常见的块级元素：form–交互表单h1–1级标题hr–水平分隔线p–段落table–表格ul–无序列表常见的行内元素：a–链接img–图片input–输入框select–项目选择font–字体设定b–粗体i–斜体strong–粗体强调CSS的display属性display属性用于指定HTML标签的显示方式属性值：关键字•常用的有4个CSS的display属性值属性常用可能值说明displayblock将元素显示为块级元素，该元素前后会带有换行符inline元素会被显示为行内元素，该元素前后没有换行符Inline-block行内块元素没有换行符none该元素不会被显示块级元素与行内元素的相互转换行-块块-行demo6-3.html本节内容盒子模型盒子模型的各项属性块级元素与行内元素盒子模型的应用盒子模型的应用页面布局导航栏分栏……纵向导航使用line-height属性使li中的文本垂直方向居中，使用text-align属性使li中的文本水平方向居中。使用list-style-type属性，隐藏列表项目符号制作时使用ul进行制作，设定li的边框及宽高横向导航设置li的宽度属性后，设置display属性，属性值为inline-block，可以使li标签横向排列。在IE和Firefox中，ul默认的margin和padding不一样，要手动声明margin和padding为0，才能使ul显示样式兼容。分栏的实现demo6-4.html图像透明的实现img{opacity:0.4;filter:alpha(opacity=40);/*针对IE8以及更早的版本*/}本节小结CSS盒子模型简介使用CSS修饰元素边框使用CSS修饰元素内边距和外边距行内元素、块级元素的概念及display属性的用法CSS盒子模型的应用网页布局导航栏的实现分栏的实现谢谢ThankYou