css属性五

最新推荐文章于 2024-04-29 13:38:05 发布

米白蓝

最新推荐文章于 2024-04-29 13:38:05 发布

阅读量67

点赞数

分类专栏： HTML+css 文章标签： html 前端 css

本文链接：https://blog.csdn.net/qq_50563868/article/details/123350801

版权

HTML+css 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>属性</title>
  <style>
    .box1 {
      width: 100px;
      height: 100px;
      background-color: #fa5;
      /* border: 10px solid #b91; */
      /* outline: 10px solid #c37; */
      box-shadow: 10px 10px 40px rgba(0, 0, 0, .4);
      /* border-top-left-radius: 10px 50px; */
      border-radius: 10px 30px 50px 70px;
    }
    .box2, .box3 {
      width: 100px;
      height: 100px;
      background-color: #d19;
      float: left;
    }
    .box3 {
      background-color: #e57;
    }
    .span1 {
      float: right;
      width: 100px;
      height: 100px;
      background-color: #ff1199;
    }
    .out {
      /* float: left; */
      /* display: inline-block; */
      /* overflow: hidden; */
      border: 10px solid #a23;
      clear: left;
    }
    .out::after {
      display: block;
      content: '';
      clear: left;
    }
    .int {
      float: left;
      width: 100px;
      height: 100px;
      background-color: #a90;
    }
    .int2 {
      clear: both;
    }
    .box4 {
      width: 200px;
      height: 200px;
      background-color: #a51;
    }
    .out1 {
      /* overflow: hidden; */
      width: 100px;
      height: 100px;
      background-color: #a19;
    }
    .out1::before {
      content: '';
      display: table;
    }
    .int1 {
      margin-top: 50px;
      width: 50px;
      height: 50px;
      background-color: #a20;
    }
    .box5 {
      float: left;
      width: 100px;
      height: 100px;
      background-color: #a34;
    }
    .box6 {
      float: right;
      width: 200px;
      height: 200px;
      background-color: #43a;
    }
    .box7 {
      width: 100px;
      height: 100px;
      background-color: #2a3;
      /* clear: right; */
      clear: both;
    }
  </style>
</head>
<body>
  <div class="box1"></div>
  
  <div class="box2"></div>
  <div class="box3"></div>
  <span>我是span我是span我是span我是span我是span我是span我是span我是span我是span我是span我是span我是span我是span我是span我是span我是span我是span我是span我是span我是span我是span我是span我是span我是span我是span我是span我是span我是span我是span我是span我是span我是span我是span我是span我是span我是span我是span我是span我是span我是span我是span</span>
  <span class="span1 ">我是浮动元素span</span>
  <br><br><br><br><br><br>
  <div class="out">
    <div class="int"></div>
    <!-- <div class="int2">div</div> -->
  </div>
  <div class="box4"></div>
  <div class="out1">
    <div class="int1"></div>
  </div>
  <div class="box5"></div>
  <div class="box6"></div>
  <div class="box7"></div>
</body>
</html>

属性

outline：用来设置元素的轮廓线，用法和border一样，轮廓不会影响到可见框的大小；
border-radius:四个值：左上、右上、左下、右下；三个值：左上、右上左下、右下；两个值：左上右下、右上左下；border-top-left-radius：10px 30px;表示以圆心为半径水平半径为10px，垂直半径为30px，画一个椭圆；
float：可以使子元素在父元素的左右进行浮动；none；left；right；浮动后块级元素自动占用的左外边距就会没有；元素设置浮动后，会从文档流中脱离出，不占据文档流位置；浮动元素会向左或向右进行排列；一行如果不能容纳完，就会换行展示；浮动元素不会盖住文字，文字会环绕图片；元素设置浮动后，脱离文档流后，元素的一些特点就会发生变化：块元素不再独占一行，默认宽度高度就是内容的宽度高度；行内元素：脱离文档流后，会变成块级元素，脱离文档流，就不区分块级元素与行内元素了；
高度塌陷的问题：父元素高度没有定义，子元素浮动后，脱离文档流，使父元素高度丢失；
BFC（Block Formatting Content）块级格式化环境：是css中的一个隐含属性，可以为一个元素开启BFC，BFC开启后该元素会变成一个独立的布局区域；特点：开启后的元素不会被浮动元素所盖住；子元素和父元素外边距不会重叠；可以包含浮动的子元素；通过特殊方式开启：1.设置元素浮动，2.将元素设置为行内块元素，3.将元素的overflow设置为一个非visible的值；常用方式：设置元素overflow：hidden，开启BFC，使其高度不塌陷；
clear：清除浮动元素对当前元素产生的影响：left清除左浮动、right清除右浮动、both清除两侧中最大影响的那一侧；清除的原理就是自动为该元素添加一个外边距，使自身的位置不受其他元素影响；
可以使用after清除浮动，给他加一个文本content和清除clear:both;但是after是一个行内元素，所以需要转换为块级元素；外边距重叠也可以使用::before伪元素来解决，不过使用display：table比较好，这个也可以解决高度塌陷问题；

米白蓝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css属性五

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>属性</titl
复制链接

扫一扫