HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第5章CSS盒子模型(上)

本文涉及的产品
交互式建模 PAI-DSW,5000CU*H 3个月
简介: HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第5章CSS盒子模型

本教程案例在线演示


有路网PC端

有路网移动端


免费配套视频教程


免费配套视频教程


教程配套源码资源


教程配套源码资源


div


div 可定义文档中的分区(division)。

div 标签可以把网页分割为独立的、不同的部分。


image.png

可以看成以下结构:


image.png


div不像 h1,p标签,没有任何默认样式,其主要作用是标识网页上的某块区域。常见做法是通过给div元素加上id或class,然后通过css选中某个div,对其进行样式美化。

<div class="demo">我是一个div</div>

<style>
        .demo{
            color:red;
            font-size: 20px;
        }   
</style>


image.png

每个div可以看成一个盒子


一个盒子中主要的属性有5个:width、height、padding、border、margin。如下:


width:内容的宽度。CSS中 width 指的是内容的宽度,而不是盒子的宽度。盒子的宽度=内容宽度+padding+border


height:内容的高度。CSS中 height 指的是内容的高度,而不是盒子的高度。盒子的高度=内容高度+padding+border


padding:内边距。


border:边框。


margin:外边距。


image.png


元素宽高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>        div {
        width: 200px;
        height: 200px;
        background-color: gray;
    }    </style>
</head>
<body>
<div>我是一只小小鸟</div>
</body>
</html>

image.png


边框


属性          说明                          示例

border-top-color    上边框颜色

border-top-color:#369;

border-right-color  右边框颜色

border-right-color:#369;

border-bottom-color 下边框颜色

border-bottom-color:#fae45b;

border-left-color   左边框颜色

border-left-color:#efcd56;

border-color        四个边框为同一颜色

border-color:#eeff34;

上、下边框颜色:#369

左、右边框颜色:#000

border-color:#369 #000;

上边框颜色:#369

左、右边框颜色:#000

下边框颜色:#f00

border-color:#369 #000 #f00;

上、右、下、左边框颜色:

#369、#000、#f00、#00f

border-color:#369 #000 #f00 #00f;


边框粗细


border-width:像素值

order-top-width:5px;
        border-right-width:10px;
        border-bottom-width:8px;
        border-left-width:22px;
        border-width:5px ;
        border-width:20px 2px;
        border-width:5px 1px 6px;
        border-width:1px 3px 5px 2px;

边框样式

none

hidden

dotted

dashed

solid

double

border-top-style:solid;
        border-right-style:solid;
        border-bottom-style:solid;
        border-left-style:solid;
        border-style:solid ;
        border-style:solid dotted;
        border-style:solid dotted dashed;
        border-style:solid dotted dashed double;


border简写

同时设置边框的颜色、粗细和样式

border-bottom: 9px #F00 dashed ;
        border: 9px #F00 dashed ;

外边距

margin-top
    margin-right
    margin-bottom
    margin-left
    margin

margin-top: 1px 
            margin-right : 2 px 
            margin-bottom : 2 px 
            margin-left : 1 px 
            margin : 3 px 5 px 7 px 4 px;
            margin: 3px 5px;
            margin: 3px 5px 7px;
            margin: 8px;


外边距的妙用

网页居中对齐

前提,居中对齐的网页元素必须设定宽度。

margin:0px  auto;

内边距

padding

padding-left
    padding-right
    padding-top
    padding-bottom
    padding

padding-left:10px;
padding-right: 5px;
padding-top: 20px;
padding-bottom:8px;
padding:20px 5px 8px 10px ;
padding:10px 5px;
padding:30px 8px 10px ;
padding:10px;


盒子型模的尺寸


image.png

盒子模型总尺寸=border-width+padding+内容宽度

box-sizing

box-sizing 是用于告诉浏览器如何计算一个元素是总宽度和总高度

box-sizing: content-box

width = content width;

height = content height

box-sizing: border-box

width = border + padding + content width

heigth = border + padding + content heigth

<div class="content-box">Content box</div>
<br>
<div class="border-box">Border box</div>
<style>
div {
  width: 160px;
  height: 80px;
  padding: 20px;
 border: 8px solid orange;
  background: pink;
}
 /**元素的总宽度 = 160 + 20*2 + 8*2; 总高度 = 80 + 20*2 + 8*2 ; */ 
.content-box { 
  box-sizing: content-box; 
}
 /** 元素的总宽度 = 160; 总高度 = 80px; */  
.border-box { 
  box-sizing: border-box;
}
</style>


image.png


content box:


image.png

image

border box:


image.png

image

总结一下:

1.对于给定width和height的元素,设置box-sizing属性会影响盒子content width和 content height。

2.浏览器默认使用标准盒子模型,即box-sizing: content-box, 就是我们所写的宽度和高度就是对content 进行设置的。

3.在一些响应式布局中,我们修改了浏览器计算元素宽度、高度的方式,认为元素的宽度和高度是包括内边距padding和边框border


元素默认样式


很多标签都有自己的默认样式

我们在chrome浏览器中运行时,可以通过开发者工具(快捷键Ctrl+Shift+I)来一个个审查元素,来看看它们的默认样式

body标签的margin为8px


image.png


p标签的上下外边距为16px


image.png

image

h1标签的上下外边距为21.440px

image.png


image

ul标签的上下外边距也为16px,左内边距也为40px


image.png

image

重置默认样式


为了兼容性,凡是浏览默认的样式,都不要使用。

重置默认样式 (css reset)

/*默认样式重置(css reset)*/
body,p,h1,h2,h3,h4,h5,h6,dl,dd{
    margin: 0;
    font-size: 12px; /* 中文字体大小的最小值 */
    /* font-family: xx; 也可以设置字体 */
}
ol,ul {
    list-style: none; /* 去除列表样式 */
    padding: 0;
    margin: 0;
}
a {
    color: #464646;
    text-decoration: none;
}
a:hover {
    color: #f60;
    text-decoration: underline;
}


取色器工具

用来拾取演示,和测量长度的轻量级工具。

双击执行

image.png


image


弹出取色器,点击按钮


image.png


image

测量宽高

选择屏幕标尺


image.png


image

测量

image.png


image


拾取颜色


选择屏幕取色器


image.png

image

随意选取颜色


image.png

image

练习 有路网右侧黑板报


image.png


image

我们书写css的步骤应该按照由外及内,由上至下,由左到右的顺序。

black-board.css

.black-board{
  width: 220px;
  background-color: #f9f9f9;
}
.book-con{
  padding: 10px;
  border:1px solid #eaeaea
}
.black-board h2{
  font-size: 16px;
}
.black-board ul{
  padding-top: 14px;
  padding-left: 20px;
}
.black-board li{
  line-height: 22px;
}

youlu-blackboard.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="black-board.css">
</head>
<body>
  <div class="black-board">
    <div class="book-con">
      <h2>黑板报</h2>
      <ul>
        <li><a href="#">2020秋季延迟发货开启</a></li>
        <li><a href="#">分享领佣金</a></li>
        <li><a href="#">助力2020开学季!包邮政策再</a></li>
        <li><a href="#">邀请有礼</a></li>
      </ul>
    </div>
    <div class="book-con">
      <h2>购物指南</h2>
      <ul>
        <li><a href="#">支付宝担保交易,安全快捷</a></li>
        <li><a href="#">保证24小时之内发货</a></li>
        <li><a href="#">赠送积分,积分可用于支付</a></li>
        <li><a href="#">收货后7天内可以无理由退货</a></li>
        <li><a href="#">提供电子商务小包、EMS、快递</a></li>
        <li><a href="#">配送造成的所有损失由我们承担</a></li>
        <li><a href="#">提供免费短信提醒服务</a></li>
      </ul>
    </div>
    <div class="book-ad-con">
      <img src="img/zhinan.jpg" alt="">
    </div>
  </div>
</body>
</html>


元素分类


行级(内联)元素

块级元素

内联块元素

目录
相关文章
|
27天前
|
前端开发
从零开始学习前端开发:HTML基础
HTML是前端开发的基础,它是网页内容的结构化描述语言。本文将介绍HTML的基本语法、标签和元素,以及如何使用它们来创建简单的网页。
|
9天前
|
前端开发
前端基础学习(一)HTML入门
前端基础学习(一)HTML入门
9 0
前端基础学习(一)HTML入门
|
13天前
|
资源调度 JavaScript 前端开发
【前端开发---Vue2】史上最详细的Vue入门教程(六) --- 工程化开发和脚手架、组件注册
【前端开发---Vue2】史上最详细的Vue入门教程(六) --- 工程化开发和脚手架、组件注册
【前端开发---Vue2】史上最详细的Vue入门教程(六) --- 工程化开发和脚手架、组件注册
|
13天前
|
JavaScript 前端开发 程序员
【前端开发---Vue2】史上最详细的Vue入门教程(五) --- 细讲‘生命周期’
【前端开发---Vue2】史上最详细的Vue入门教程(五) --- 细讲‘生命周期’
【前端开发---Vue2】史上最详细的Vue入门教程(五) --- 细讲‘生命周期’
|
14天前
|
缓存 自然语言处理 JavaScript
【前端开发---Vue2】史上最详细的Vue2入门教程,从基础到进阶带你彻底掌握Vue(四)
【前端开发---Vue2】史上最详细的Vue2入门教程,从基础到进阶带你彻底掌握Vue(四)
|
14天前
|
前端开发 JavaScript 程序员
【前端开发---Vue2】史上最详细的Vue2入门教程,从基础到进阶带你彻底掌握Vue(三)
【前端开发---Vue2】史上最详细的Vue2入门教程,从基础到进阶带你彻底掌握Vue(三)
|
14天前
|
Web App开发 JavaScript 前端开发
【前端开发---Vue2】史上最详细的Vue2入门教程,从基础到进阶带你彻底掌握Vue(一)
【前端开发---Vue2】史上最详细的Vue2入门教程,从基础到进阶带你彻底掌握Vue(一)
|
14天前
|
存储 JavaScript 前端开发
【前端开发---Vue2】史上最详细的Vue2入门教程,从基础到进阶带你彻底掌握Vue(二)
【前端开发---Vue2】史上最详细的Vue2入门教程,从基础到进阶带你彻底掌握Vue(二)
|
19天前
|
移动开发 前端开发 JavaScript
学习html
【5月更文挑战第25天】学习html
24 2
|
27天前
|
Web App开发 前端开发 iOS开发
CSS3 转换,深入理解Flutter动画原理,前端基础图形
CSS3 转换,深入理解Flutter动画原理,前端基础图形