码迷,mamicode.com
首页 > Web开发 > 详细

03前端_css盒子

时间:2020-06-26 01:16:09      阅读:108      评论:0      收藏:0      [点我收藏+]

标签:add   item   round   div   chm   边框   center   颜色   repeat-x   

盒子模型

css中的盒子是由element、padding、border、margin组成 element:元素内容 padding:内边距:是内容距离内边框的距离 border:边框 margin:外边距:是元素和元素之间的距离技术图片技术图片

盒子的属性

内容的宽度和高度
  • width宽度属性:宽度值|百分比|auto

  • max-width最大宽度属性:宽度值|百分比|auto

  • min-width最小宽度属性:宽度值|百分比|auto

  • height高度属性:高度值|百分比|auto

  • max-height最大高度属性:高度值|百分比|auto

  • min-height最小属性:高度值|百分比|auto

什么样的氧元素可以设置width和height属性
  • 块元素<p>、<div>、<ul>、<ol>、<li>、<dl>、<form>、<hr>、<h1>~<d6>..

  • 替换元素<img>、<input>、<textarea>..

border属性
  • border-width边框宽度属性:thin|medium|thick|值|百分比|auto

  • border-color边框颜色属性:三种颜色表示方法:十六进制数、rgb、字符

  • border-style边框样式:值top、right、bottom、left |none|hidden/solid/dotted...

  • border缩写:宽度|样式|颜色

padding属性
  • padding-top/right/bottom/left:长度值|百分比

margin属性
  • margin-top/right/bottom/left:长度值|百分比|auto

  • margin值为auto可以实现水平方向的居中显示效果

display属性
  • display属性:block|inline|inline-block

    • inline-block将块元素转换为行内块元素(多个块元素在一行显示)

    • block将行内元素(一行显示多个行内元素)转换为块元素(每个元素默认占一行)

    • inline将块元素每个元素默认占一行)转换为行内元素(一行显示多个行内元素)

    • none元素不会显示

background属性
  • background属性

    • background-color设置背景颜色 rgb()|16进制|颜色名|transparent透明度|inherit继承父级元素的背景颜色

    • background-image设置背景图片,背景图片和背景颜色都存在的情况,显示背景图片 url(‘URL‘)|none|inherit

    • background-repeat只针对背景图片有效 repeat-x|repeat-y|no-repeat|inherit

    • background-attachment设置背景图片是否固定或者随着页面滚动 scroll|fixed|inherit

    • background-position设置背景图片的起始位置 top left|top right|bottom left|bottom right|center|.....如果只规定了一个值,那么另 一个值为center

list-style属性
  • list-style属性

    • list-style-type类型 disc|circle|square|lower-roman|upper-roman|lower-alpha...

    • list-style-position设置列表位置inside|outside|inherit

    • list-style-image使用图像代替列表项标记url(‘URL‘)

03前端_css盒子

标签:add   item   round   div   chm   边框   center   颜色   repeat-x   

原文地址:https://www.cnblogs.com/muzihuan/p/13193472.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!