尺寸和边框:

一、尺寸

　　行内元素是不能设置宽和高的，其高度是由元素里面的内容的高度撑起来的；

　　行内块元素可以设置宽和高，当行内块元素没有设置宽高的时候，行内块元素的宽高是其默认的宽高；

　　块级元素：可以设置宽高，但是如果没有设置宽，则其默认宽度是该块级元素的父级元素的宽度的100%；如果没有设置高度，则该该块级元素的默认高度是由该块级元素内部的内容撑起来的高度，如若块级元素　　　　　　　　中没有内容，则默认高度为；

二、溢出处理

　　当一个元素里面的内容量过大且该元素的尺寸大小又不足以完全能容纳下该元素里面的内容时，则会发生溢出想象；默认的溢出情况是垂直方向溢出容纳不下的内容，并且将溢出的内容显示出来，代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        div{

            width:200px;

            height:200px;

            background-color:yellow;

        }

    </style>

</head>

<body>

    <div>

        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ea delectus at nobis consectetur doloremque aliquam ratione repudiandae, incidunt temporibus quis aperiam animi iusto, consequuntur cum facilis quos perspiciatis voluptates ullam?

    </div>

</body>

</html>

这里关于overflow的几个取值入下：

　　overflow:scroll(不管是否溢出，水平和垂直都添加滚动条)
　　　　　　hidden(隐藏溢出的内容)
　　　　　　auto(只在有溢出的地方添加滚动条)
　　　　　　visible(默认值)
　　常见的块级元素：div , h系列 , li , dt ,dd，以及p标签元素；
　　常见行内元素：span , a , b , i , u , em;
实现水平溢出的方法：可以将盛放内容的块级元素或行内块元素的宽度设置为比其该元素的父元素的宽度更大即可实现水平溢出；
三、边框 border
　　border设置时的简写方式：border:width style color;
　　width:边框的宽度（就是边框的粗细程度);
　　style:边框线的样式，大多数情况下取值为solid(边框线为实线),当然也有其它取值；
　　color:边框线的颜色；
　　单个设置某一个方向是否有边框：border-top/border-left/border-right/border-bottom:width style color;

　　边框的阴影:box-shadow：h-shadow v-shadow blur spread color

　　　　h-shadow:水平方向阴影的偏移量

　　　　v-shadow:垂直方向阴影的偏移量

　　　　blur:阴影的模糊距离，值越大，越模糊

　　　　spread:阴影的尺寸

　　　　color:阴影的颜色

五、盒子模型

　　　　盒子模型---元素在页面上实际的占地空间的计算方式

　　　　浏览器默认的元素实际占地宽度：

　　　　左外边距+左边框+左内边距+内容区域宽度+右内边距+右边框+右外边距

　　　　浏览器默认的元素实际占地高度：

　　　　上外边距+上边框+上内边距+内容区域高度+下内边距+下边框+下外边距

***外边距margin：单位有px和%，px：因为改变边框距的影响，直接位移多少像素的距离；%：位移的距离是父元素宽度的百分比；

margin的特殊取值有auto(自动计算块级元素的左右边距，使其块级元素在父级元素的范围内水平居中显示，ps：auto不能是块级元素垂直居中，只能设置水平居中只对块级元素有效)，padding(内边距)取值没有auto；

　　　　box-sizing：默认的是content-box,即设置的width(宽度)仅仅是元素内容的宽度，如取值设置为border-box,则设置宽度实际上是元素内容区域的宽度+border-width+padding(左右内边距),当然高度也是一样的；

　　总结

块级元素

行内元素

行内块元素

设置宽高有效。如果不设置宽，宽度是父元素宽度的100%。如果不设置高，高度靠内容撑开

设置宽高无效。宽高靠内容撑开。

设置宽高有效。不设置，自带默认宽高，宽高都为0px。

独占一行

与其他行内元素/行内块共用一行

与其他行内元素/行内块共用一行

上下左右外边距有效

但块级元素被另一个块级元素所包裹时，被包裹的块级元素的margin值如果设置左右边距，那么该块级元素则只是水平移动，但是如果b置a上下边距，则该块级元素在上下移动时，其父元素也会跟着上下移动，但是不会左右移动，始终保持父子块级元素的上下相对位置不变；

上下外边距无效，左右外边距有效

上下左右外边距有效

2020-01-05

web前端基础-css-尺寸边框的更多相关文章

  1. Web前端基础——CSS

    一.CSS概述 css ( cascading style sheets ) 层叠样式表,可以轻松设置网页元素的显示.位置和格式外,甚至还能产生滤镜,图像 淡化,网页淡入淡出的渐变效果,简而言之,cs ...

  2. Web前端温故知新-CSS基础

    一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...

  3. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  4. 进击的Python【第十三章】：Web前端基础之HTML与CSS样式

    进击的Python[第十四章]:Web前端基础之HTML与CSS样式 一.web框架的本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客 ...

  5. 好程序员web前端分享css常用属性缩写

    好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...

  6. Python web前端 03 CSS属性

    Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...

  7. web前端基础知识及快速入门指南

    web前端基础知识及快速入门指南 做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...

  8. Python web前端 02 CSS

    Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...

  9. 好程序员web前端分享CSS元素类型

    好程序员web前端分享CSS元素类型 目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依 ...

随机推荐

  1. [CF1311F] Moving Points - 树状数组

    Solution 按 \(x\) 关键字升序排序,依次枚举每个点 考虑对任意 \(x_j < x_i\),那么当 \(v_j \leq v_i\) 时,它们不会相交,且 \(dis\) 就是它们 ...

  2. Zjnu Stadium HDU - 3047 带权并查集板子题

    #include<iostream> #include<cstring> #include<cstdio> using namespace std; +; int ...

  3. RBAC基于角色的权限管理模型

    一.权限管理模型的必要性: a. 安全性:防止误操作,防止数据泄露,保证信息的安全. b. 数据隔离:保持不同的角色具有不同的权限,只能看到自己权限范围内的数据 二.权限管理模型的发展: a. 传统的 ...

  4. ubuntu18.04图形模式切换到命令模式

    命令模式 :Ctrl+Alt+F5 图形模式:Ctrl+Alt+F1

  5. Spark学习之路 （三）Spark之RDD[转]

    RDD的概述 什么是RDD? RDD(Resilient Distributed Dataset)叫做弹性分布式数据集,是Spark中最基本的数据抽象,它代表一个不可变.可分区.里面的元素可并行计算的 ...

  6. 杭电oj_2058——The sum problem（java实现）

    原题链接:http://acm.hdu.edu.cn/showproblem.php?pid=2058 思路:等差数列公式变形:sum = a1 * len + len *(len -1)/2 抽象成 ...

  7. 转载：openmax基本概念

    https://yellowmax.blog.csdn.net/article/details/78080168 https://yellowmax.blog.csdn.net/article/det ...

  8. abp demo运行1

    1.从官方网站下载demo 如下: https://aspnetboilerplate.com/Templates 填写响应的信息,下载demo 2.vs2017打开demo,如下图: 3.安装.ne ...

  9. 2019-08-15 纪中NOIP模拟B组

    T1 [JZOJ3455] 库特的向量 题目描述 从前在一个美好的校园里,有一只(棵)可爱的弯枝理树.她内敛而羞涩,一副弱气的样子让人一看就想好好疼爱她.仅仅在她身边,就有许多女孩子想和她BH,比如铃 ...

  10. 2019-08-10 纪中NOIP模拟B组

    T1 [JZOJ1235] 洪水 题目描述 一天, 一个画家在森林里写生,突然爆发了山洪,他需要尽快返回住所中,那里是安全的. 森林的地图由R行C列组成,空白区域用点“.”表示,洪水的区域用“*”表示 ...