关于CSS

CSS的全称是Cascading Style Sheets，中文意思是层叠样式表

CSS的引入方式

1、行内样式表

直接在标签中写入样式，如：
<div style="width:100px;height:100px;background-color:red">

2、内部样式表

在style标签中书写CSS代码。style标签写在head标签中。如：

<!DOCTYPE>
<head>  
  <style type="text/css">
    div{
        width:100px;
        height:100px;
        background-color:red
    }
</head>  
<body>
     <div></div>
</body>

3、外部样式表

CSS代码保存在扩展名为.css的样式表中，将该文件引入到html文件中
<link type="text/css" rel="styleSheet" href="CSS文件路径" />

4、css import

在css文件里面再引入另一个css文件，如：
@import url("另一个CSS文件路径")

标签并排的方式float

想让多个块级元素并排，可以将所有子元素设置浮动float属性，并给所有浮动的子元素的父级元素，加上一个.clearfix的类，如下所示：

.clearfix::after{
    content:'';
    display:block;
    clear:both;
}

关于写样式的tip

.topNavBar>nav>ul{}
其中>的意思是下一个元素必须是上一个元素的儿子，孙子都不行，很严谨

让a标签中的字体下划线去掉，在a中写样式 text-decoration:none;

让li中的每个小圆点消失，就在ul中写样式list-style:none;

当<li>没有把<a>包起来时，在a中写样式 display:block;

div 高度由其内部文档流元素的高度总和决定
文档流：文档内元素的流动方向，内联元素从左往右流动，块级元素从上往下流动

英文单词是不能分割的，如果想要让它分割，则写一个属性word-break:break-all;

脱离文档流的方法：设置定位position

positon : fixed;
top  : 0 ;      //该值可自定
left : 0 ;      //该值可自定

让背景图片居中：background-position : center center; //水平居中，垂直居中
让背景图片按比例缩放：background-size : cover;

让一个div水平居中，只要设置margin : 0 auto;即可

类似于span的内联元素是不接受设置宽高的，除非把它设置为inline-block，即display:inline-block;

让文字水平居中：text-align : center;

要让某个元素绝对定位，在该元素上写position : absolute;
还要再其父元素上写position : relative;

上下边距不一样，在该元素样式中写vertical-align : top;

用css制作三角形：

等腰三角形

有一个div，给div设置样式

div{
    border-bottom : 10px solid red;
    width : 0 ;
    height : 0 ;
}

直角三角形

有一个div，给div设置样式

div{
    border-right : 10px solid red;
    width : 0 ;
    height : 0 ;
    border-top-width : 0px;
}

最后编辑于：2019.02.20 15:33:19