css盒子模型及其他元素属性简介

最新推荐文章于 2022-08-03 19:55:56 发布

Albert-Wilson

最新推荐文章于 2022-08-03 19:55:56 发布

阅读量495

点赞数

分类专栏： css 文章标签： CSS 盒子模型

本文链接：https://blog.csdn.net/hxwm_8937/article/details/76406055

版权

4 篇文章 0 订阅

订阅专栏

 
 列表属性及用法 

 
 超链接的伪类样式 

 
 其样式属性可以为： 

 
 a： 
 link 
 未访问状态 

 
 a： 
 visited 
 以访问状态 

 
 a： 
 hover 
 鼠标上移状态 

 
 a： 
 active激活选定状态 

 
 盒子模型 

 
 其属性值可以为： 
 padding 
 内边距  
  
 content 
  
 内容区 

 
 margin  
 外边距 
 width 
 内容宽度 

 
 border  
 边框 
 height  
 内容高度 

 
 内边距 
  
 padding

 
 内容和边框之间的距离 

  其属性值可以为：1个值：则四个方向采用相同的值 

  2个值：则上下的值，左右 

  3个值：则是上，左右，下 

  4个值：则按照顺时针的顺序，上，右，下，左依次添加 

  padding: 20px 5px 15px 10px; 

 
 外边距 
  margin 

 
 影响当前盒子和其他盒子的距离 

  其属性值可以为：1个值：则四个方向采用相同的值 

  2个值：则上下的值，左右 

  3个值：则是上，左右，下 

  4个值：则按照顺时针的顺序，上，右，下，左依次添加 

  margin-top: 50px 25px; 

 
 注意： 
 当两个块级元素上下排列，上下间距取最大值 

 
 左右排列，左右间距为两者相加 

 
 边框 
 border  

 
 内容区 
  content 

 
 内容宽度 
 width  
 注意： 
 外边距，边框和内边距都会影响内容的宽度 

 
 内容高度 
 height 

 
 圆角弧度 
 border-radius 

 
 其属性值可以为：1个值：4个角都一样 

  2个值：左上右下，右上左下 

  3个值：左上，右上左下，右下 

  4个值：左上，右上，右下，左下 

  border-radius: 150px; 

 
 盒子阴影 
 box-shadow 

 
 与text-shadow类似，但比它多了一个模糊拓展范围 

 
 其属性值为：1：x轴方向的偏移 

  2：y轴方向的偏移 

  3：模糊范围 

  4：阴影的拓展范围 

  5：阴影颜色 

  box-shadow: -10px -5px 10px 10px red; 

 
 overflow属性 

 
 其规定当内容溢出元素框时发生的事情。 

 
 其属性值可以为： 
 visible：默认值 超出的文本默认显示 

 
 auto：当文本超出的时候显示滚动条，否则不显示 

 
 scroll：不管文本是否超出范围，度添加滚动条 

 
 hidden：将超出的部分隐藏起来 

 
 inherit： 
 规定应该从父元素继承 overflow 属性的值。 

  overflow: auto; 

关注

专栏目录