CSS学习（二）

Near_Li 发布于2019-08-29 15:29 / 1097人阅读

摘要：学习二一三大模型之盒子模型盒子模型每个矩形元素都由元素的内容，内边距，边框，和外边距边框盒子的厚度，如手机包装盒的厚度内边距内容与边框之间的距离，如填充泡沫的厚度外边距与其他盒子的距离边框样式格式单实线用的最多虚线点线双实线边框综合写法写

CSS学习（二）

一、CSS三大模型之盒子模型

1.盒子模型

每个矩形元素都由元素的内容，内边距，边框，和外边距
边框：盒子的厚度Border，如手机包装盒的厚度
内边距：内容与边框之间的距离，如填充泡沫的厚度Padding
外边距：与其他盒子的距离Margin

2.边框样式格式：border-style: solid;

solid 单实线用的最多
dashed  虚线
dotted 点线
double 双实线

3.边框综合写法

写法一：
 border-width: 1px;
 border-color: pink;
 border-style: solid;
写法二推荐使用：
 border:1px solid blue;综合性写法 宽度 样式 颜色
 border-top: 1px solid blue;改上边框的属性

4.表格细线边框

border-collapse: collapse;合并相邻的边框，相邻表格边框会出现叠加的形式，如1px+1px=2px，使用该方法可以
合并，使边框粗细一致，都为1px
复习：cellspacing="0"  表格中去除表格之间的内边距  ，cellpadding="0"

5.圆角边框

 border-radius：apx bpx cpx dpx;
 1个值表示4个角都是相同的10px的弧度*
 2个值左上角和右下角10px 右上角 左下角 40px对角线
 3个值左上角一个值,右上角，左下角一个值 右下角 一个值
 4个值表示 左上，右上， 右下，左下




        
        Document
        


        20px
        50%或者100px
        10px 40px
        20px 40px 80px
        10px 20px 40px 80px
        123
        柠檬

6.内边距(padding)

内边距就是内容距离边框的距离 ,值也为顺时针传递
4个值 顺时针 上 右 下 左
padding  写两个个值 上下10px 左右30px
3个值 10 px 30 px 50px  上10 左右30 下50
1个值 上下左右都是一样



        
        Document
        


        内边距就是内容距离边框的距离

7.外边距 margin

margin-top  盒子距离上的边距
margin-left  盒子距离左的边距
margin:30px auto 左右自动 这样可以块级带有宽度的盒子水平居中对齐,只有块级元素有效，其余元素无效
文字水平居中与盒子水平居中：
文字水平居中：text-align: center;
盒子水平居中：margin: 10px auto;
文字垂直居中:
行高等于盒子高度
height: 42px;盒子高
line-height: 42px;行高
插入图片更改大小 用width和height，同时插入图片也是一个盒子，可以通过margin与padding 盒模型更改位置
背景图片background: #fff url(图片/刘德华3.jpg) 30px  50px 
背景图片的大小只能用 backgroud-size
背景图片的位置更改用background-position

8.内外边距清洁

margin: 0;清除外边距
padding:0;清除内边距

9.行内元素，只有左右外边距，没有上下外边距，内边距。

10.外边距合并

垂直方向：如果上面的盒子下外边距给20px（margin-bottom:20px;），下面的盒子上外边距给10px(margin-top:
10px;),最终会以大的边距为准,不会出现上下30px;
内嵌式合并：父亲盒子中，镶嵌了一个孩子盒子，如果要使孩子盒子相对与父亲盒子下移动，使用margin-top 20px;
会使两个盒子都同时下移，不能达到我们想要的效果

解决方法：
1.可以为父元素定义1像素的上边框(border: 1px solid red)或上内边距(padding: 1px;)
2.可以为父元素添加
overflow: hidden;溢出隐藏




        
        Document

11.盒子尺寸计算

外盒尺寸空间尺寸：width+border+padding+margin 
内盒尺寸：width+border+padding  130 可以看见的
如果要使盒子内的内容往右移动，用padding-left,最终的盒子大小通过修改外盒子宽度就行



        
        Document
        
        


        
                新闻

**如果没有宽度属性，使用padding则不会影响
**如果父亲没有指定宽度则盒子会默认和父亲一样宽块级元素则会默认和父亲一样宽
复习列表：list-style:none;去除列表默认中的小黑点
12.宽度剩余法

 width 经常使用宽度剩余法或者高度剩余法
 padding 会影响盒子大小，需要进行加减计算
 margin 会有外边距合并 还有ie6下面的margin加倍BUG最后使用

13.盒模型
CSSS3新属性box-sizing: border-box;

padding  border 不撑开盒子
盒子大小为width 就是说 padding 和border包含到width里面的
border: 15px solid red;

14.阴影
文字阴影

text-shadow: 3px 3px 3px rgba(0,0,0,0.5);
text-shadow: 水平距离 垂直距离 模糊 阴影颜色

盒子阴影

box-shadow:5px 5px 3px 4px rgba(0,0,0,4);
水平 垂直 模糊距离 阴影尺寸 阴影颜色 内/外阴影；
前两个属性必须写  内阴影inset ,外阴影不用写 默认






        
        Document
 
 
 
        


        水晶图片

专线服务服务器托管深度学习二学习css css学习学习css布局

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113357.html

前端资源系列（4）-前端学习资源分享&前端面试资源汇总

摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

princekin 2019-08-20 11:28 评论0 收藏0
CSS学习（二）：背景图片如何定位？

摘要：我们都知道属性用来指定背景图片应该出现的位置，可以使用关键字绝对值和相对值进行指定。使用相对值时，定位方式直观上不好理解。但应清楚，最基本的方法是根据绝对值定位。上图经过计算，背景图片左上角被定位在处，故背景图片被切除一半。我们都知道background-position属性用来指定背景图片应该出现的位置，可以使用关键字、绝对值和相对值进行指定。在CSS Sprites中，这个属性使...

winterdawn 2019-08-30 15:54 评论0 收藏0
我的webpack学习笔记（二）

前言上一篇文章我们讲了多页面js的打包，本篇文章我们继续scss的打包。多页面css单独打包首先，我们css编写采用的是sass，所以我们先来安装sass-loader以及可以用到的依赖 $ npm install sass-loader node-sass css-loader style-loader --save-dev 安装完loaders，下面在webpack.config.js...

mcterry 2019-08-20 18:05 评论0 收藏0
我的webpack学习笔记（二）

前言上一篇文章我们讲了多页面js的打包，本篇文章我们继续scss的打包。多页面css单独打包首先，我们css编写采用的是sass，所以我们先来安装sass-loader以及可以用到的依赖 $ npm install sass-loader node-sass css-loader style-loader --save-dev 安装完loaders，下面在webpack.config.js...

ninefive 2019-08-05 11:39 评论0 收藏0
我的webpack学习笔记（二）

前言上一篇文章我们讲了多页面js的打包，本篇文章我们继续scss的打包。多页面css单独打包首先，我们css编写采用的是sass，所以我们先来安装sass-loader以及可以用到的依赖 $ npm install sass-loader node-sass css-loader style-loader --save-dev 安装完loaders，下面在webpack.config.js...

awokezhou 2019-08-29 12:57 评论0 收藏0
我的webpack学习笔记（二）

前言上一篇文章我们讲了多页面js的打包，本篇文章我们继续scss的打包。多页面css单独打包首先，我们css编写采用的是sass，所以我们先来安装sass-loader以及可以用到的依赖 $ npm install sass-loader node-sass css-loader style-loader --save-dev 安装完loaders，下面在webpack.config.js...

hedzr 2019-08-01 17:11 评论0 收藏0