CSS基础

一  :css层叠样式表 

1.特点：

(1)继承性
(2)层叠性 可被覆盖

外部样式表/链入样式表  <link rel="stylesheet" type="text/css" href="">

头部样式表  <style type="text/css"></style>

行内样式表(极差，不允许使用)  <div style="width: 100px;height: 100px;background: lightblue;"></div>

2.命名法

驼峰命名法

xiaoMing小驼峰命名法 XiaoMing大驼峰命名法

下划线命名法 xiao_ming

xiao-ming

表现与结构分离

表现: css

结构: html

3.三种定位

固定定位:相对于浏览器窗口定位,翻页时位置不变
相对定位:相对于原本文档流中的位置定位,仍然占据原位置
绝对定位:相对于离它最近的已定位父级进行定位,一直找到浏览器窗口为止

嵌套规则
块里面可以放行内
行内里面不可以放块

       #guDing{
            background: lightblue;
            position: fixed; /*固定定位*/
            left: 500px;
            top: 200px;
        }
        #xiangDui{
            background: red;
            position: relative;  /*相对定位*/
            left: 100px;
            top: 100px;
        }
        #jueDui{
            background: lightgreen;
            position: absolute;   /*绝对定位*/
            left: 100px;
            top: 100px;

4.行块属性

display: inline;设置成了行内属性
display: inline-block;设置成了行内块属性

display: block;设置成了块属性

块标签
   div,ul,li,ol,h1~h6,p
   可以设置宽高
   不可以与别人共处一行
   不设置宽度的情况下,默认宽度是100%
行内标签
   span,strong,
   不可以设置宽高
   可以与别人共处一行
   其宽高由内容撑开
行内块标签
   img,input,
   可以设置宽高
   可以与别人共处一行

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style type="text/css">
        div{
            width: 300px;
            height: 300px;
            background: lightblue;
            display: inline-block;
        }
        span{
            width: 300px;
            height: 300px;
            background: lightgreen;
            display: inline-block;
        }
        input{
            width: 400px;
            height: 50px;
        }
    </style>
</head>
<body>
     <div>我是div</div><div>我是div</div>
     <span>我是span</span><span>我是span</span>
     <input type="text" name="">
     <input type="text" name="">
</body>
</html>

5.浮动

浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框为止.

float :left/right;

6.盒模型

外边距: margin;

内边距:padding(距离内容物的距离)

边框:border

dotted:点的虚线 double:双实线 solid:实线 dashed:线段的虚线

加上这句父元素就不会跟着子元素动 overfolw: hidden;

margin: 50px 0 0 50px;顺序是:上 右 下 左

margin: 0 50px 10 px;上0,左右50,下10

margin: 20 px 30 px; 上下20,左右30

margin: 10 px; 四个方向都是10 px

margin-left:auto; margin-right: auto; 会左右居中;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style type="text/css">
        #div1{
            width: 500px;
            height: 500px;
            background: lightblue;
            overflow: hidden;/*加上这句就不会动*/
            /*border-width: 5px;
            border-color: red;
            border-style: solid;*/
            border: 5px solid red;
            /*border-radius: 50%;变成了一个圆*/
            border-top-left-radius: 50%;
            border-bottom-right-radius: 50%;
            border-top-right-radius: 50%;
        }
        #div2{
            width: 100px;
            height: 100px;
            background: lightgreen;
            margin-right: auto;*/
            margin: 100px auto 0;
        }
        #div3{
            width: 0;
            height: 0;
            border-top: 50px solid red;
            border-right: 50px solid transparent;/*颜色的透明*/
            border-bottom: 50px solid rgba(0, 0, 0, 0);/*透明*/
            border-left: 50px solid pink;
            border-radius: 50%;
        }
    </style>
</head>
<body>
  <div id="div1">
      <div id="div2">
          
      </div>
      <span>lxl</span>
  </div>
  <div id="div3">
      
  </div>
</body>
</html>

 

posted @ 2021-11-07 14:43  LLLLY  阅读(43)  评论(0)    收藏  举报