CSS

一、CSS样式编辑

/* 一般而言，CSS的声明语句非常简单。 */
选择器 { 属性: 值; /* 更多属性...*/ }

/* 你可以通过类名来指定它 */
.some-class { }

/* 给出所有类名 */
.some-class.class2 { }

/* 标签名 */
div { }

/* id */
#someId { }


如果是， 选择器组合时候，尤其是class选择器，有空格和没有空格的区别很大，看如下例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<style type="text/css">
    .green1 {color: green;}
    .red1 {color: red;}
    .purple1{color:purple}

    .green1 .red1{color: green;}   /*带空格，表示嵌套的子元素class */
    .green1.purple1{color: purple;}  /*不带空格，表示同时具备这2个class */



</style>
</head>
<body>
    <h1 class="green1 ">.green1</h1>
    <h1 class="red1 ">.red1</h1>
    <h1 class="purple1 ">.purple1</h1>


    <div class="green1">
        <h1 class="red1">.green1 .red1{color: red;}  /*被嵌套的class */
        </h1>
    </div> 

  <h1 class="green1-1 purple1 ">.green1.purple1{color: purple;}</h1> /*同时具备连个class */
 </body> </html>

 

参考：https://learnxinyminutes.com/docs/zh-cn/css-cn/ 

         css 选择器： https://www.cnblogs.com/ssaylo/p/13223439.html

还有一些小专题：

https://blog.csdn.net/weixin_43736435/article/details/107119668

https://blog.csdn.net/zhou_shadow/article/details/91412014

https://www.cnblogs.com/jacobb/p/7674410.html

 

二、盒子模型

 盒模型，顾名思义，就是一个盒子。生活中的盒子，有长宽高，盒子本身也有厚度，可以用来装东西。页面上的盒模型我们可以理解为，从盒子顶部俯视所得的一个平面图，盒子里装的东西，相当于盒模型的内容（content）；东西与盒子之间的空隙，理解为盒模型的内边距（padding）；盒子本身的厚度，就是盒模型的边框（border）；盒子外与其他盒子之间的间隔，就是盒子的外边距（margin）。

    元素的外边距（margin）、边框（border）、内边距（padding）、内容（content）就构成了CSS盒模型。

 

 

 几乎所有的tag, 如 div ,ul ,li, p等都具有盒子模型特征

填充凡是一：

内部

  • padding-top：设置元素的顶部填充
  • padding-bottom：设置元素的底部填充
  • padding-left：设置元素的左部填充
  • padding-right：设置元素的右部填充

 

外部：

  • margin-top：设置元素的上外边距。
  • margin-bottom：设置元素的下外边距。
  • margin-left：设置元素的左外边距
  • margin-right：设置元素的右外边距。

或者（如下 margin和padding一样）

  • padding:25px 50px 75px 100px;

    • 上填充为25px
    • 右填充为50px
    • 下填充为75px
    • 左填充为100px

  • padding:25px 50px 75px;

    • 上填充为25px
    • 左右填充为50px
    • 下填充为75px

  • padding:25px 50px;

    • 上下填充为25px
    • 左右填充为50px

  • padding:25px;

    • 所有的填充都是25px

 

关于border

盒子边框（border）

语法：

border : border-width | border-style | border-color

边框属性—设置边框样式：border-style 用于定义页面中边框的风格，常用属性值如下：

none: 没有边框即忽略所有边框的高度（默认值）
solid：边框为单实线（最常用）
dashed： 边框为虚线
dotted：边框为点线
double：边框为双实线



参考：https://www.jianshu.com/p/824eed8ce119

 

posted @ 2020-07-07 17:02  花生与酒  阅读(172)  评论(0)  编辑  收藏  举报