CSS 布局

文章目录

一. 典型的盒子模型

CSS 布局

1.1 border-radius 圆角边框

代码展示:

<DOCTYPE html>
<html>
<head>
<style> 
div
{
text-align:center;
border:2px solid #a1a1a1;
padding:10px 40px; 
background:#dddddd;
width:350px;
border-radius:25px;
}
</style>
</head>
<body>

<div>圆角边框</div>

</body>
</html>

CSS 布局

1.2 border-style 属性

  1. 定义和用法
    border-style 属性用于设置元素所有边框的样式,或者单独地为各边设置边框样式。
    只有当这个值不是 none 时边框才可能出现。

  2. 可能的值:
    CSS 布局

1.3 border 属性

  1. 定义和用法
    border 简写属性在一个声明设置所有的边框属性。
  2. 可能的值:
    CSS 布局

1.4 margin与padding

  1. 定义和用法
    margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。

  2. 说明
    这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度
    块级元素的垂直相邻外边距会合并,而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地,浮动元素的外边距也不会合并。允许指定负的外边距值,不过使用时要小心。

  3. 定义和用法
    padding 简写属性在一个声明中设置所有内边距属性。

  4. 说明
    这个简写属性设置元素所有内边距的宽度,或者设置各边上内边距的宽度行内非替换元素上设置的内边距不会影响行高计算;因此,如果一个元素既有内边距又有背景,从视觉上看可能会延伸到其他行,有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。
    CSS 布局

二. 元素分类

1.1 display

  • 定义和用法
    display 属性规定元素应该生成的框的类型
  • 块级元素和内联元素可以通过display进行相互转换
    CSS 布局

1.2 块级元素

独占一行,可以设置宽和高

1.3 内联元素

不会自动换行,设置宽和高的时候是不起作用的

1.4 css 隐藏元素的方式

display:none;
width:0 height:0

三. float 浮动布局

  1. 定义和用法
    float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。

  2. 如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地

    注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。

  3. 可能的取值:
    CSS 布局

  • left -------- 对象向左浮动,而后面的内容会**流向对象的右侧
  • right--------------- 对象向右浮动,而后面的内容会流向对象的左侧
    4. 清除浮动
  • 定义和用法
    clear 属性规定元素的哪一侧不允许其他浮动元素。
  • 可能的取值:
    CSS 布局

四. position 定位布局

  1. 定义和用法
    position 属性规定元素的定位类型。
  2. 说明
    这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移
  3. 可能的取值
    CSS 布局
  • absolute: 绝对定位将对象从文档流中分离出来,通过设置Left right top bottom 四个方向上的值相较于父级元素的绝对定位,如果存在这样的父级元素,相较于body

  • relative: 相对定位不会将对象从文档流中分离出来,通过设置Left right top bottom 四个方向上的值进行相对定位

  • 代码展示

<html>
<head>
<style type="text/css">
*{ 
  padding: 0; margin: 0; 
  }
.main{width: 300px; 
  height: 300px; 
  border:1px solid black;
  margin: 200px; 
  position: relative; 
  }
.one{ 
  width: 100px; 
  height: 100px; 
  background-color: red; 
  position: absolute; 
  top: 100px; left: 200px; 
}
.two{ 
  width: 100px; 
  height: 100px; 
  background-color: blue; 
}
.three{ 
  width: 100px;
  height: 100px; 
  background-color: yellow; 
} 
</style>
</head>
​
<body>
<div class="main"> 
   <div class="one">这是第一个div</div> 
   <div class="two">这是第一个div</div> 
   <div class="three">这是第一个div</div> 
</div>
</body>
​
</html>
​
  • 界面展示
    CSS 布局
上一篇:HTML+CSS常见面试题


下一篇:CPF-WPF XAML解析异常发生