黑马程序员技术交流社区
标题: 技术贴 [打印本页]
作者: zalbj 时间: 2019-7-24 14:54
标题: 技术贴
html的核心结构:<!DOCTYPE html>使用的是h5格式 <html lang="en">
<head>
<meta charset="UTF-8">字符集
<title>Document</title>标题
</head>
<body> 内容
</body>
</html>
表格:table标签
表单:input标签
图片:img src
链接:a href
空格:
小于号:<
大于号:>
谷歌浏览器内核:blink;
web标准的组成部分结构标准（HTML）
表现标准（CSS样式）
行为标准（javascript）
关于HTML的概念• 1、HTML是超文本标记语言，不是编程语言；
• 2、用HTML标签来描述网页元素，比如：链接、图片、文字等；
• 3、我们需要将所有的标签放在尖括号“<>” 里面
权重对比
第一等：代表内联样式，如:style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为100。 == 0,1,0,0
第三等：代表类，伪类和属性选择器，如.content，权值为10 == 0,0,1,0
第四等：代表类型选择器和伪元素选择器，如div p，权值为1== 0,0,0,1
最高等级：!important 提高权重，有提权的效果，有了样式优先生效；
继承的权重为0盒子的组成： 内容 一般指的就是宽和高
边框：border
内边距：padding 拉开内容到盒子边缘的距离；
外边距： margin 拉开盒子与盒子之间的距离；
边框：border边框的宽度：border-width:3px;
边框的样式：border-style:solid;
取值：solid实线 dashed虚线 dotted点线
边框的颜色： border-color:red;
综合写法：border:边框宽度 边框样式 边框颜色；
设置边框border的不同方向的样式边框的设置：如果只写border表示四个方向的边框都有，也可以利用 “ – + 方向英文”来设置不同方向的边框
border:3px solid #ccc; 四个边框都有
border-left:3px solid #ccc; 左边框
border-right:3px solid #ccc; 右边框
border-top:3px solid #ccc; 上边框
border-bottom:3px solid #ccc; 下边框
border:none; 没有边框
注意:01border的书写顺序如果我们在最后面书写border:none;会将所有的border清空，所以在书写的一定要注意书写顺序；
02 有一些标签默认是有border的，我们需要单独设置，比如：input
Padding不同方向设置：padding:30px; 四个方向的内边距都是一个值；
padding-left:40px; 设置左边的内边距；
padding-right:40px; 设置右边的内边距
padding-top:40px; 设置距离顶部的内边距
padding-bottom:40px; 设置距离底部的内边距
取值的个数不同表示意思不同： padding：30px； 表示四个方向的取值都一样；
padding：30px 60px； 表示：上下 左右 取值；
padding：30px 50px 60px； 表示：上 左右 下 取值；
padding：30px 40px 50px 60px ；表示：上 右 下 左 取值；
盒子的实际占位尺寸蓝色表示 内容的大小
绿色表示 内边距padding
黄色表示 边框border
橙色表示 外边距margin
盒子的实际大小：内容的宽和和高度+内边距+边框；注意：计算实际占位尺寸的时候没有margin，外边距是用来更改盒子的所占的位置，而不是本身的大小；
盒子添加padding和border的问题问题：01、如果盒子有固定的宽高的情况下，添加了边框和内边距，盒子的实际大小会变大；
解决方案：加多少减去多少，再减的是还要注意是减去宽度环视高度；
02、如果盒子没有设置宽高，加了padding值之后盒子就不会被撑大；
Margin外边距的设置margin不同方向设置：margin:30px; 四个方向的外边距都是一个值；
margin-left:40px; 设置左边的外边距；
margin-right:40px; 设置右边的外边距
margin-top:40px; 设置距离顶部的外边距
margin-bottom:40px; 设置距离底部的外边距
取值的个数不同表示意思不同： margin：30px； 表示四个方向的取值都一样；
margin：30px 60px； 表示：上下 左右 取值；
margin：30px 50px 60px； 表示：上 左右 下 取值；
margin：30px 40px 50px 60px ；表示：上 右 下 左 取值；
块级盒子水平居中• 让盒子居中的条件：
• 01 盒子的显示模式必须为块级元素
• 02 盒子必须要有固定的宽度
• 03 利用margin：上下 auto；/ margin：auto；
• 注意：上下的值可以自定义设置，如果没有设置为 margin:0 auto;
文本居中属性text-align: center;和margin:auto;的区别text-align:center; 是让父级盒子里面的文本、行内元素（span/a/em）、行内块元素(img/input)水平居中显示;
margin:auto; 只让块元素水平居中显示;
4、插入图片和背景图片区别• 内容一般用插入图片，装饰性的小图标一般用背景图片；
• 插入图片移动位置要使用盒子模型的外边距margin和内边距padding设置；
• 背景图片移动位置用背景图片额度定位background-position进行设置；
5、清除元素默认的内外边距默认的标签基本上都会有一些默认的内外边距，会影响我的网页布局，所以我们需要在书写网页的时候清除这些默认的边距：*{marin:0；padding:0;}
以后书写网页的时候css第一行就书写改代码；
6、行内元素设置外边距margin和padding的问题给行内元素设置margin-top、margin-bottom、padding-top、padding-bottom是不会显示效果的；如果想要让他们生效怎么处理？
解决方案：01、不要添加；
02、将行内元素的显示模式用display: block;转换给块元素或者用display:inline-block;转换行内块元素；
7、垂直排列的盒子外边距合并问题：两个盒子如果垂直排列，上面的盒子设置了marin-bottom,下面的盒子设置了margin-top，最终显示的样式两个值谁大就显示谁；
解决方案：不要同时设置，只给一个盒子设置即可；
8、嵌套垂直外边距合并问题：如果两个盒子有嵌套包含的父子级关系，如果给子级盒子设置了margin-top，效果显示父级盒子也会跟着掉下来；
解决方案：
1、为父级设置上边框（不用，因为添加了border父级的高度会增大）
2、直接给父级设置padding-top：1px，如果父级有高度注意减去对应的高度；
3、直接给父级添加overflow:hidden;（常用方法）
9、设置圆角矩形：border-radius正圆首先是正方形，然后设置border-radius:50%;
圆角矩形不管是长方形还是正方形，只要设置border-radius的取值为固定的值即可；
胶囊形状设置border-radius的取值为盒子高度的一半；
border-radius的取值border-radius两个值 == border-radius:左上角和右下角 右上角和左下角；
border-radius三个值 == border-radius:左上角 右上角和左下角 右下角；
border-radius四个值 == border-radius:左上角 右上角 右下角 左下角；
作者: 许振宁 时间: 2019-7-24 15:54
学到了，6666
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |