Day9:html和css_boxModel

Day9:html和css_html_02音乐

 

Day9:html和css

 

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="description" content="" />
    <meta name="Keywords" content="" />
    <link rel="shortcut icon" href="favicon.ico"  type="image/x-icon"/>
    <!-- 针对浏览器 -->
    <link rel="stylesheet" href="css/normalize.css" />
    <!-- 对网页 头部和底部样式 -->
    <link rel="stylesheet" href="css/base.css" />
    <!-- 首页的css  只写首页的 独有的-->
    <link rel="stylesheet" href="css/index.css">
</head>

 

案例:

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dome</title>
    <style>
     div {
        border: 1px solid #000;
        float: left;
        width: 300px;
        height: 100px;
     }
     img {
        width: 100%;
        height: 100%;
     }
    </style>
</head>
<body>
    <div>
        <img src="images/pic.jpg" height="250" width="700" alt="">
    </div>
</body>
</html>

 

盒子模型布局

width >  padding  > margin

  1. margin 会有外边距合并

  2. padding 会影响盒子大小

  3. width

圆角边框(CSS3)

border-radius: 50%;

盒子阴影(CSS3)

box-shadow:水平阴影 垂直阴影 模糊距离（虚实）  阴影尺寸（影子大小）  阴影颜色  内/外阴影；

 

box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);
box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色  内/外阴影；

 

浮动(float)

什么是浮动？

指设置了浮动属性的元素会脱离标准标准流的控制

选择器{float:属性值;}
属性值 描述
left 元素向左浮动
right 元素向右浮动
none 元素不浮动

清除浮动的方法

选择器{clear:属性值;}
属性值 描述
left （清除左侧浮动的影响）
right （清除右侧浮动的影响）
both 同时清除左右两侧浮动的影响

额外标签法

<div style=”clear:both”></div>

父级添加overflow属性

overflow为 hidden|auto|scroll

使用after伪元素清除浮动

.clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   

.clearfix {*zoom: 1;}

 

使用before和after双伪元素清除浮动

.clearfix:before,.clearfix:after { 
  content:"";
  display:table;  
}
.clearfix:after {
clear:both;
}
.clearfix {
  *zoom:1;
}

 

常用新标签

header：定义文档的页眉
nav：定义导航链接的部分
footer：定义文档或节的页脚
article：定义文章
section：定义文档中的节
aside：定义其所处内容之外的内容
datalist   标签定义选项列表
embed：标签定义嵌入的内容
audio：播放音频
video：播放视频

 

多媒体 audio

loop 循环播放
autoplay 自动播放
controls 是否显不默认播放控件

 

多媒体 video

 

autoplay 自动播放

controls 是否显示默认播放控件

loop 循环播放

width 设置播放窗口宽度

height 设置播放窗口的高度