web前端实习Day4--css2--盒子模型

目录

1.伪类选择器

2. background背景的使用

3.行高的使用

 4.标签的嵌套规则

 5.盒子模型

5.1border边框

 5.2内边距

5.3padding撑大盒子的问题 

5.4margin外边距

---

1.伪类选择器

属性名	效果
:link	普通链接状态（主要针对a标签）
:visited	链接访问过后的状态（主要针对a标签）
:hover	鼠标悬停状态
:active	鼠标按住状态
:focus	获取焦点时的状态(针对表单元素)

<style>
    #aaa:link{
    color: red;
    /* 取消文本下划线 */
    text-decoration: none;
    font-weight: 100;
}
</style>

<a id="aaa" href="http://www.baidu.com/">点我跳转到百度</a>

注意：链接正确时才会显示设置的颜色，否则显示紫色

2. background背景的使用

背景颜色	background-color: 颜色;
背景图片	background-image:url(图片地址);		图片默认按原图大小平铺
背景图片重复模式	background-repeat: 参数;	repeat(默认值 横向纵向都重复) no-repeat(不重复) repeat-x(横向重复) repeat-y(纵向重复)
背景模式	background-attachment:参数;	scroll：默认 fixed：背景图片固定，不会随着页面的滚动而滚动
背景位置 针对不重复 的背景图片	background-position：参数;
		方向单词：横向：left center right                   纵向：top center bottom
		像素值：距离左边的px        距离上面的px
		百分比：   距离左边的百分比   距离上边的百分比	只写一边，另一边默认center 位置是整数，则往右下角位移 如果是负数，往左上角位移
背景大小	background-size	contain：缩放背景图片以完全装入背景区，可能背景区部分空白 cover：缩放背景图片以完全覆盖背景区，可能背景图片部分看不见

属性连写：background:color image repeat attachment position/size

<style>
    #box{
        height: 500px;
        background: blue url(image/img1.jpg) no-repeat 0 0/200px 200px;
    }
</style>

3.行高的使用

css的行高 = 文字的上边距+文字高度+文字的下边距

        行高>高度 文字向下

        行高<高度 文字向上

        行高=高度 文字垂直居中对齐

如果一个元素内部只有一行文字 那么line-height设置为当前元素高度 单行文本垂直居中对齐

/* 设置文字水平方向的排列方式 */
<style>
    #box{
        text-align: center;
        line-height: 400px;
    }
</style>

 4.标签的嵌套规则

块级标签可以嵌套一切其他标签

行内和行内块，互相之间可以嵌套，但是不能嵌套块级

注意：

        p标签：块级元素，但不能嵌套其他块级，一旦嵌套会出现两对p标签，然后块级元素在p标签之外

                                

块级元素	p  h1~h6  ul>li  ol>li  dl>dt  dd  html  body  div  form
行内元素	span  a  i/em  u/ins  b/stronng  s/del
行内块元素	input  img

 5.盒子模型

5.1border边框

边框四个方向：top  right  bottom  left

边框属性

属性	属性名	参数
边框颜色	border-方向-color
边框样式	border-方向-style	solid	实线
		dotted	点线
		dashed	虚线
		double	双实线
边框宽度	border-方向-width	px值

四个方向连写：

        border：width style color        四个方向统一设置

三个属性连写：

        border-方向：width style color

<style>
    #box{
        width: 200px;
        height: 200px;
        background-color: red;
        /* 只设置边框颜色不生效 */
        /* border-top-color: green; */
        /* border-top-style: solid;
        border-top-width: 10px;
        border-bottom-color: blue;
        border-bottom-style: dashed;
        border-bottom-width: 30px; */
        /* border-top: 10px solid green; */
        border: 30px solid orange
    }
</style>

 5.2内边距

padding内边距：当前盒子内的内容到盒子变的距离

        分四个方向：padding-left  padding-right  padding-top  padding-bottom

        属性连写：

                padding：上 右 下左

                padding：上 左右 下

                padding：上下 左右

                padding：上下左右

<style>
    #box{
        width: 400px;
        height: 400px;
        background-color: red;
        color: #fff;
        font-size: 30px;
        /* padding-left: 30px;
        padding-top: 50px;
        padding-right: 30px;
        padding-bottom: 10px; */
        /* 属性连写 */
        padding: 10px 20px 30px 40px;
        /* padding: 10px 20px 30px; */
        /* padding: 10px 20px */
        /* padding: 10px */
    }
</style>

5.3padding撑大盒子的问题 

盒子最终的宽度 = 盒子自身设置的宽度 + 左右padding + 左右border

盒子最终的高度 = 盒子自身设置的高度 + 上下padding + 上下border

例：

一个盒子宽度200px 文字距离盒子内左边距40px 边框3px 当前盒子最后的宽度是多大？  246

如果想要保证盒子的最终宽度为200px，那

就需要200-40-6 154px

<style>
    #box{
        width: 200px;
        height: 200px;
        background-color: red;
        padding: 30px 60px;
        border: 20px solid green;
    }
    #parent{
        width: 500px;
        height: 300px;
        background-color: orange;
        padding-left: 200px;
        padding-top: 150px;
    }
    #son{
        width: 300px;
        height: 150px;
        background-color: blue;
    }
</style>

 块级元素不设置宽度时，占满父容器

 没有设置宽度时 设置左右padding不会撑大当前盒子

 除非设置的左右padding加起来超过了父容器的宽度

谷歌盒子模型：

        box-size：content-box  

        盒子最终的宽高 = 盒子自身的宽高 + padding + border

IE盒子模型：

        box-size：border-box    

        盒子最终的宽高 = 盒子设置的宽高  padding border系统会自动减去

5.4margin外边距

分为四个方向：

    margin-left：左外边距                margin-right：右外边距

    margin-top：上外边距                margin-bottom：下外边距

margin连写：

    margin：上  右  下  左

    margin：上  左右  下

    margin：上下  左右

    margin：上下左右

margin特殊值：auto表示外边距自适应，把剩余空间分配给当前外边距的方向

auto针对上下外边距不生效

margin:0 auto;块级元素 横向居中*非常常用*

边框合并：

        margin-bottom: -border宽度;

        margin-top: -border宽度;

        

边框塌陷：

        子元素设置margin-top的时候会带着父元素一起下沉

        解决方式：

            1 给父元素添加透明的上边框，但是会改变父元素宽度

                border-top: 1px solid transparent;

            2 块级格式化上下文(BFC) 清除一些异常的现象

                overflow:hidden

行内元素上下margin不生效，可以在块级元素中使用padding