6、居中特性_css三大特性_盒子模型

居中特性

text-align:center内容相对于标签的宽度水平居中

  • 可以让元素中的文本内容相对于当前元素(父元素)的宽度水平居中
  • 可以让元素中的行内元素相对于当前元素(父元素)的宽度水平居中
  • 可以让元素中的行内块元素相对于当前元素(父元素)的宽度水平居中
  • 不可以让元素中的块内块元素相对于当前元素(父元素)的宽度水平居中

line-height:height的属性值;内容相对于标签的高度垂直居中

  • 可以让元素中的文本内容相对于当前元素(父元素)的高度垂直居中
  • 可以让元素中的行内元素相对于当前元素(父元素)的高度垂直居中
  • 可以让元素中的行内块元素相对于当前元素(父元素)的高度垂直居中
  • 不可以让元素中的块状元素垂直居中,会改变子元素(块)的高度
    小提示:属性值小于高度值靠上,等于高度值居中,大于高度值靠下

css的三大特性

层叠性

  • 相同的属性,后面的会覆盖前边的
  • 就近原则
<style>
      header {
        color: red;
        color: blue;
      }
style>
<body>
 	
	<header>我是什么颜色?header>
body>

继承性

  • 后代会继承祖先元素的样式
  • 遵循亲代就近继承
  • 元素本身的样式大于继承
  • 高度是不能继承的,是按照元素本身的特性
  • line-height可以继承父元素的
<style>
    section {
        text-align:center;
        font-style:italic;
        co1or:□#f00;
        }
style>
<body>
    <section>
        <p>我是段落标签p>
        <div class="box">
                 
            <span>我是section的后代元素span>        
        div>
    section>
body>

优先级

  • 同一个元素中基础选择器:通配符选择器 < 标签选择器 < 类名选择器 < ID选择器 < style(行内样式) < !important(只针对同一个元素基础选择器)
  • 复合选择器:比较权重性
  • 选中同一个元素权重相同,比较层叠行
    千位 百位 十位 个位
    1 0 0 0
    0 1 0 0
    0 0 1 0
    0 0 0 1
<style>
     /*权重: 0 2 0 0 */
	#father #son{  
		color:blue;
	}
	 /*权重: 0 1 1 1 */
	#father p.c2{
		color:black;
	}
style>
<body>
	<div id="father" class="c1">
		<p id="son" class="c2">
			试问这行字体是什么颜色的?
			
		p>
	div>
body>

css三大重点(盒子模型、浮动、定位)

盒子模型

包括:边框border、内边距:padding 、外边框margin

盒子:狭义: div 元素 广义:所有的块状元素

网页布局的本质:就是拼接盒子的过程

盒子模型——边框(border)

边框的尺寸:border-width

边框的线条样式:solid:实线 dashed:虚线 dotted:点线 double: 双实线

总结:

  • 边框会影响盒子的尺寸
  • 所有的元素都能设置和取消边框
<style>
	header{
		width:600px;
		height:300px;
		background-color:rgba(255,0,0,0.3);
		/* 边框的尺寸 */
		border-top-width:10px;
		/* 边框的线条样式    solid实线  dashed虚线  dotted点线  双实线double*/
		border-top-style:solid;
		/* 边框的颜色 */
		border-top-color:blue;
		/* 单个边框的综合设置 */
		border-left:20px dashed purple;
		border-right:15px dotted #000;	
	}
	section{
	    width: 400px;
        height: 200px;
        background-color: rgba(0, 0, 100, 0.2);
        /* 所有边框的综合设置 */
        border:30px solid red;
	}
	footer{
		width: 400px;
        height: 200px;
        background-color: rgba(0, 100, 100, 0.2);
        /* 去掉边框 两种方法*/
        border-right: none;
        border-left: 0;
	}
	img {
        border: 10px solid gold;
    }
    button {
        border: 3px dotted red;
        /*去掉边框*/
        border: 0;
    }
    table {
        width: 800px;
        height: 300px;
        /* 去掉表格边框之间默认的距离,相当于cellspacing */
        border-collapse: collapse;
        /* border: 1px solid blue; */
    }
     table td {
       /*要给td加   要用后代空格*/
        border: 1px solid blue;
     }
style>
<body>
    <header>header>
    <section>section>
    <footer>footer>
    <img src="../2.jpg" alt="" />
    <button>我是按钮button>
    <table>
      <tr>
        <td>1td>
        <td>2td>
        <td>3td>
        <td>4td>
      tr>
    table>
body>

盒子模型——内边距(padding)

内边距:内容与边框之间的距离

内边距的特点:

  • 内边距也会影响盒子的尺寸
  • 综合设置
    • 四个值 上 右 下 左
    • 三个值 上 左右 下
    • 两个值 上下 左右
    • 一个值 上下左右
  • 所有的元素都能设置内边距
  • 一些元素有默认的内边距 例如:ul li

清除默认内边距

<style>
	*{
		padding:0;
	}
style>
<style>
	.main{
		width: 400px;
        height: 300px;
        border: 11px solid pink;
        /*边框*/
        padding-top: 10px;
        padding-bottom: 20px;
        padding-left: 30px;
        padding-right: 50px;
        /* 四个值   上 	 右 	  下	   左 */
        padding: 10px 40px 60px 100px;
        /* 三个值  上    左右     下*/
        padding: 10px 50px 100px;
        /* 两个值 上下 左右*/
        padding: 10px 100px;
        /* 一个值 上下左右*/
        padding: 100px;
	}

    button{
        padding:50px;
	}
    b{
        padding:50px;
	}
style>
<body>
    <section class="main">
     		文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
    section>
    
    <button>button>
    <b>我是行内元素b>
body>

盒子模型——外边距(margin)

外边距:元素与其他元素或者浏览器之间的距离

<style>
	*{
		margin:0;
	}
style>

外边距的特点:

  • 外边距不会影响盒子的尺寸
  • 一些元素有默认的外边距 ,一般通过通配符选择器清除所有的外边距
  • 行内元素垂直方向设置外边距无效
  • 外边距不会影响盒子的尺寸

外边距实现盒子的居中

  • margin:0 auto;
  • 给谁加 margin:0 auto; 谁就居中
  • 相对于父元素的宽度水平居中
  • 实现盒子居中的充分必要条件
    • 必须设置宽度
    • 必须是块状元素

垂直元素的外边距合并(塌陷)

  • 上下两个相邻的元素,如果上边的元素有下外边距,下边的元素有上外边距,则两个元素之间的垂直距离并不是两者的和,而是两者中的最大值

嵌套元素的外边距合并(塌陷):

  • 嵌套的两个元素,如果父元素没有上边框且没有上内边距,则子元素的上外边距就是距离外边元素的距离;则父元素的上外边距会与子元素的上外边距发生合并,合并后的外边距为两者中的较大者

如何解决嵌套元素的外边距合并

  • 给父元素添加上边框
  • 给父元素添加上内边距
  • 给父元素添加overflow:hidden
<style>
      .father {
         /* 方法3 */
        overflow: hidden;
        border: 20px solid black;
        width: 600px;
        height: 300px;
         /*方法1  添加边框  去掉*/
        border-top: 0;
        margin-top: 70px;
        /* 方法2  给父元素添加上内边距*/
          padding:10px;
      }
      .son {
        width: 100px;
        height: 100px;
        background-color: red;
        margin-top: 90px;
      }
style>
<body>
    <div class="father">
      <div class="son">div>
    div>
body>
  • 父元素与子元素外边距合并 为90 为最大的

6、居中特性_css三大特性_盒子模型_第1张图片

  • 方法1 添加边框

    6、居中特性_css三大特性_盒子模型_第2张图片

  • 方法2 给父元素添加上内边距

6、居中特性_css三大特性_盒子模型_第3张图片

  • 方法3 清除浮动

    6、居中特性_css三大特性_盒子模型_第4张图片

你可能感兴趣的:(css,学习,前端)