当前栏目: [前端开发基础]您现在的位置是:成都seo > 前端学习 > 前端开发基础 > 正文

HTML基础学习第十天

2020-04-11 01:30前端开发基础 人已围观文章来源:未知文章作者:admin

简介表格的细线边框 1.border-collapse //表示相邻边框和在一起 2.边框会影响实际大小 边框也会增加宽度和高度 边框会撑开...

表格的细线边框
 
1.border-collapse //表示相邻边框和在一起
 
2.边框会影响实际大小 边框也会增加宽度和高度
 
边框会撑开盒子 
 
不变大,需要减去边框的宽度
 
-------------------------------------------------
 
1.测量盒子大小的时候,不量边框
 
2.如果测量的时候包含了边框,则需要width/height 减去边框的宽度、
 
----------------------
内边距(padding)
 
边框和内容之间的距离
 
padding 复合型写法
 
padding : 20px 30px: 上下 20px; 左右 30px;
padding : 20px 30px 30px;  上:20px; 左右30px 下30px;
----------------------------------
padding 发生了情况
 
1.内边距也会增加盒子的大小 设置的时候,需要减去内边距大小
 
 
-------------------------------------
margin
 
复合写法和padding 复合写法一样
 
------------------------------------
外边距典型应用
 
1.盒子必须指定了宽度
 
盒子居中
 
margin: 0 auto;  盒子居中
 
--------------------------------------------
 
水平居中对齐
 
行内元素居中
 
行内块元素居中
 
方法:行内元素或者行内块元素水平居中,给父元素添加 text-align: center 即可
 
 
 
----------------------------------------------------
外边距合并
 
垂直外边距
 
相邻的元素
 
两个相邻盒子外边距合并  取较大的margin值
 
解决方法:
只给一个盒子加外边距
 
---------------------------------------------
 
2.嵌套外边距
 
小盒子 加入外边距 margin-top:20px;
 
和父盒子 加上overflow;hidden;
 
 
----------------------------------
清除内外边距
 
* {
padding: 0px;
margin: 0px;
}
 
----------------------------------
PS基本操作
 
PS打开视图 标尺
 
1.点击标尺 右键 ,选择像素
 
选项框 选择像素
----------------------------
 
 
 
 
 
 
 
 

Tags:

说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!

本栏推荐

标签云

站点信息

  • 文章统计96篇文章
  • 标签管理标签云
  • 微信公众号:扫描二维码,关注我们