前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位

Posted 2022-07-01 dengl

前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位

一丶css选择器的优先级

 行内  >  id选择器  > 类选择器  > 标签选择器 > 继承
 1000      100        10            1        0

# 所有的值可以累加,但不能进位  (同级别的数值可以累加)
# 优先级如果相同,写在后面的生效

二丶css的颜色表示

/*RGB表示法*/
    rgb: red green blue  /* 光谱三原色 */
    rgb(255,255,255) /*白色*/
    rgb(0,0,0)   /*黑色*/

/*16进制的颜色表示法 */
    #000000-#FFFFFF
    #000-#FFF

/* 单词表示法 */
    # red green

/* rgba表示法 */
    #a代表透明度 ,范围:0-1,0是完全透明,1是不透明

三丶字体,文本,背景图片

字体

/*常用的字体属性*/

   font-family: 'Microsoft Yahei','楷体','仿宋';
   font-weight: bold;
   font-size: 12px;

文本

/*常用的文本属性*/

    text-align 文字的水平对齐
                left 左对齐
                center 居中
                reght 右对齐
    text-decoration 文本装饰
                none;         没有下划线
                line-through; 中划线
                overline;     上划线
                underline;    下划线

    text-indent 文本缩进
                text-indent: 2em; em单位是一个相对单位,相对当前字体大小的像素是1em

    line-height 行高,设置行高=容器高度,文字自动垂直居中
                 line-height: 200px;
    
    color:设置字体颜色

背景图

/*背景图属性*/

    background-color: red;   /*在没有背景图片覆盖的范围显示背景颜色*/
    
    background-image: url('timg.jpg'); /*设置背景图片*/
    
    height: 400px;
    width: 400px; 
    /*图片是否重复 */
    background-repeat: no-repeat; /*设置图片不重复   repeat-x水平重复   repeat-y垂直重复*/
    background-position: right top; /*图片的位置    左中右x 上中下y*/
    
    /*left center right /top center bottom*/
    background-attachment: fixed;/* 在窗口中固定图片的位置*/
    
    /* 综合的背景属性 */
    background:red url("timg.jpg") no-repeat left center;  把所有的设置综合写在background中

列表样式

/* 去除列表的样式 */
ul,li
    list-style:none

四丶边框设置

border:边框的意思，描述盒子的边框

???????边框有三个要素： 粗细 线性样式 颜色（如不写颜色默认为黑色。如不写粗细不显示边框。只写线性样式，默认有上下左右 3px宽度的实体黑色边框。）

/* 边框的属性  */
            /* 取值顺序:
                   一个值:上下左右
                    四个值:遵循顺时针上右下左
                    三个值:上 右左 下
                    两个值:遵循上下 左右
            */

            border-color: tomato green gray yellow;/*边框设置颜色*/
    
            border-width: 1px 3px 5px 7px;/*边框设置宽度*/
            border-style: solid dotted dashed double;/*设置边框的风格:实线,点线,虚线,双线*/

            border-top-style:solid ; /* 单独设置顶线的样式(left,bottom,right)*/ 
            border-left-style:solid ;/*单独设置左边线的样式*/ 
            border-top-color:red;    /*单独设置顶线颜色*/     
            border:yellow solid  10px;    /*统一设置边框的颜色 样式 宽度*/
        
           border-radius: 5px; /*给图形设置圆角*/

利用border画三角形

div
            width: 0px;
            height: 0px;
            border-style: solid;
            border-width: 20px;
            border-color: #7ef0c2 transparent transparent transparent;
 

margin的设置

??????margin：外边距的意思。表示边框到最近盒子的距离。

/*表示四个方向的外边距离为20px*/
margin: 20px;
/*表示盒子向下移动了30px*/
margin-top: 30px;
/*表示盒子向右移动了50px*/
margin-left: 50px;
/*表示盒子距离右面的盒子100px*/
margin-right: 100px;
/*表示盒子距离下面的盒子100px*/
margin-bottom: 100px;

???????margin的塌陷(设置了bottom和top会重合,取最最大的值)

<div class="father">
    <div class="box1"></div>        
    <div class="box2"></div>
</div>
css:
    *
            padding: 0;
            margin: 0;
        
        .father
            width: 400px;
            border: 1px solid gray;
            /*float: left;*/
        
        .box1
            width: 300px;
            height: 200px;
            background-color: red;
            margin-bottom: 20px;
            /*float: left;*/
        
        .box2
            width: 400px;
            height: 300px;
            background-color: green;
            margin-top: 50px;
            /*float: left;*/
        

/*
    当给两个标准流下兄弟盒子 设置垂直方向上的margin时，那么以较大的为准，那么我们称这种现象叫塌陷。没法解决，我们称为这种技巧叫“奇淫技巧”。记住这种现象，在布局垂直方向盒子的时候注意margin的用法。
当我们给两个标准流下的兄弟盒子设置浮动之后，就不会出现margin塌陷的问题。
*/

???????margin: 0 auto

div
            width: 780px;
            height: 50px;
            background-color: red;
            /*水平居中盒子*/
            margin: 0px auto;
                        /*水平居中文字*/
            text-align: center;

        

/*当一个div元素设置margin：0 auto;时就会居中盒子，那我们知道margin:0 auto;表示上下外边距离为0，左右为auto的距离，那么auto是什么意思呢？

设置margin-left:auto；我们发现盒子尽可能远离左侧，当设置margin-right:auto；我们发现盒子尽可能远离右侧。当两条语句并存的时候，我们发现盒子尽可能远离两侧，此时盒子就居中了。

如果给盒子设置浮动，那么margin:0 auto失效。

使用margin：0 auto;注意点：

1.使用margin: 0 auto;水平居中盒子必须有width，要有明确width，文字水平居中使用text-align: center;
2.只有标准流下的盒子 才能使用margin:0 auto; 
当一个盒子浮动了，固定定位，绝对定位(后面会讲)，margin:0 auto; 不能用了
3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center;

善于使用父亲的padding，而不是margin

??????margin属性是描述兄弟盒子的关系，而padding描述的是父子盒子的关系.

        *
            padding: 0;
            margin: 0;
        
        .father
            width: 300px;
            height: 300px;
            background-color: blue;
            padding-top: 30px;
        
        .xiongda
            width: 100px;
            height: 100px;
            background-color: orange;
        
/*
    因为父亲没有border，那么儿子margin-top实际上踹的是“流” ，踹的是行，所以父亲掉下来了，一旦给父亲一个border发现就好了
*/

五丶块和行内的转换

行内元素:

??????1.与其他行内元素并排

??????2.不能设置宽、高。默认的宽度，就是文字的宽度

??????3.对于行内标签来说不能设置宽和高

??????4.有些时候需要行内标签也设置宽和高,需要进行行内-->块,行内->行内块

块级元素：

??????1.霸占一行，不能与其他任何元素并列；

???????2.能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%。

块级元素可以转换为行内元素：

display: inline;

/*此时这个div不能设置宽度、高度；*/
/*此时这个div可以和别人并排了*/

行内元素转换为块级元素：

display: block;

/*此时这个span能够设置宽度、高度*/
/*此时这个span必须霸占一行了，别人无法和他并排*/
/*如果不设置宽度，将撑满父亲*/

标准流里面的限制非常多，导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高，那该怎么办呢？办法是：移民！脱离标准流！

????css中一共有三种手段，使一个元素脱离标准文档流：

???????（1）浮动

???????（2）绝对定位

??????（3）固定定位

/* display的属性值 : block块  inline行内 inline-block行内快 none */

    
    display: block;      /*  独占一行并且可以设置宽高*/
    
    display: inline-block;  /*既可以设置宽高又不会独占一行 行内\\块转行内快*/
    
    display: inline;        /*表示一个行内元素,不能设置宽高*/
    
    display: none;          /*不仅不显示内容,连位置也不占了*/

六丶盒模型

???在CSS中，"box model"这一术语是用来设计和布局时使用，然后在网页中基本上都会显示一些方方正正的盒子。我们称为这种盒子叫盒模型。

/* 盒模型的属性 */
width：内容的宽度
height: 内容的高度
padding：内边距，边框到内容的距离，padding的区域是有背景颜色的。并且背景颜色和内容的颜色一样。也就是说background-color这个属性将填充所有的border以内的区域
border: 边框，就是指的盒子的宽度
margin：外边距，盒子边框到附近最近盒子的距离

盒模型的计算 ：width/height+2padding+2border

如果一个盒子设置了padding，border，width，height
    盒子的真实宽度=width+2*padding+2*border
    盒子的真实高度=height+2*padding+2*border

??????如果要保持盒子真实的宽度，那么加padding就一定要减width，减padding就一定要加width。

padding的设置

/* 四个方向设置padding*/
padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;

/* 四种方式设置padding */
/*上 右 下 左*/
padding: 20px 30px 40px 50px ;
/*上 左右  下*/
padding: 20px 30px 40px;
/* 上下 左右*/
padding: 20px 30px;
/*上下左右*/
padding: 20px;

???标签的默认padding

??????比如ul，ol标签，有默认的padding-left值。

??????那么我们一般在写网页的时候，是要清除页面标签中默认的padding和margin。以便于我们更好的去调整元素的位置。

*
  padding:0;
  margin:0;    

七丶浮动

????浮动是css里面布局最多的一个属性，也是很重要的一个属性。

???float：表示浮动的意思。它有四个值。

??????1.none: 表示不浮动，默认

??????2.left: 表示左浮动

??????3.right：表示右浮动

float:left /right
    浮动的元素会脱离标准文档流,原本块级元素就不再独占整行了
    并且在原页面中也不占位置了,之后的元素会挤到页面上影响页面的排版

清除浮动 clear:both

伪元素清除法:
        .clearfix:after
            content: '';
            clear: both;
            display: block;
        


<body>
<div class="father clearfix">
<div class="box"></div>
<div class="box"></div>
</div>
<div class="main">
    主页的内容
</div>
</body>

浮动的四大特性：

1.浮动的元素会脱离标准文档流
2.浮动的元素互相贴靠
3.浮动的元素有"子围"效果
4.收缩的效果

浮动的问题和清除浮动

??????1.给父盒子设置高度

??????2.clear:both

left：当前元素左边不允许有浮动元素

right：当前元素右边不允许有浮动元素

both：当前元素左右两边不允许有浮动元素

给浮动元素的后面加一个空的div，并且该元素不浮动，然后设置clear：both。

???????3.伪元素清除法(常用)

??????????给浮动子元素的父盒子，也就是不浮动元素，添加一个clearfix的类，然后设置

.clearfix:after
    /*必须要写这三句话*/
    content: '.';
    clear: both;
    display: block;

overflow

??????overflow属性规定当内容溢出元素框时发生的事情

/*内容多余标签的大小*/
overflow:类型
       visible 可见(默认)
       hidden 超出部分隐藏
       scroll 超出显示滚动条
       auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
       inherit  规定应该从父元素继承 overflow 属性的值。

八丶定位

???定位有三种：相对定位、绝对定位、固定定位

绝对定位

??????特性：1.脱标 2.做遮盖效果，提成了层级。设置绝对定位之后，不区分行内元素和块级元素，都能设置宽高。

???一、单独一个绝对定位的盒子

??????????1.当我使用top属性描述的时候 是以页面的左上角（跟浏览器的左上角区分）为参考点来调整位置
??????????2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。

???二、以父辈盒子作为参考点

?????????1.父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点，这个父辈元素不一定是爸爸，它也可以是爷爷，曾爷爷。

??????????2.如果父亲设置了定位，那么以父亲为参考点。那么如果父亲没有设置定位，那么以父辈元素设置定位的为参考点

??????????3.不仅仅是父相子绝，父绝子绝 ，父固子绝,都是以父辈元素为参考点

    注意了：父绝子绝，没有实战意义，做站的时候不会出现父绝子绝。因为绝对定位脱离标准流，影响页面的布局。相反‘父相子绝’在我们页面布局中，是常用的布局方案。因为父亲设置相对定位，不脱离标准流，子元素设置绝对定位，仅仅的是在当前父辈元素内调整该元素的位置。

还要注意，绝对定位的盒子无视父辈的padding

/*绝对定位的居中定位*/

*
            padding: 0;
            margin: 0;
        
        .box
            width: 100%;
            height: 69px;
            background: #000;
        
        .box .c
            width: 960px;
            height: 69px;
            background-color: pink;
            /*margin: 0 auto;*/
            position: relative;
            left: 50%;
            margin-left: -480px;

            /*设置绝对定位之后，margin:0 auto;不起任何作用，如果想让绝对定位的盒子居中。当做公式记下来 设置子元素绝对定位，然后left:50%; margin-left等于元素宽度的一半，实现绝对定位盒子居中*/
        

固定定位

???????固定当前的元素不会随着页面滚动而滚动

???????特性: 1.脱标 2.遮盖，提升层级 3.固定不变

设置固定定位，用top描述。那么是以浏览器的左上角为参考点
如果用bottom描述，那么是以浏览器的左下角为参考点

作用： 1.返回顶部栏 2.固定导航栏 3.小广告

综合??:

/* 三种类型 ,相对,绝对,固定*/
position : relative /absolute /fixed
/*只有设置了定位 上,右,下,左,才会生效*/
top:10px;
right:10px;
bottom:10px;
left:10px;

/*
相对定位 :相对自己原来的位置移动,移动之后还占据原来的位置
绝对定位 :绝对定位是相对于整个html页面,不会占据原来的位置,层级的提升
    如果我们设置了绝对定位的元素 的父元素 没有设置position,那么我们对元素的所有设置都是基于整个页面
    如果设置了position,那么子盒子的absolute位置会根据父盒子的位置定位
    父相子绝:子元素设置的绝对位置会对应着祖级元素的相对位置

固定定位 :固定是相对于整个窗口的 */

九丶z-index,opacity

z-index

指的就是各个盒子重叠在一起谁上谁下的问题。

四大特性，只要你记住了，页面布局就不会出现找不到盒子的情况。

z-index 值表示谁压着谁，数值大的压盖住数值小的，
只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。

opacity

??????透明度,范围0-1,0透明,1不透明
回到顶部