html css css3 js 前端知识总结*
转载:原文链接：https://blog.csdn.net/qq_42179526/article/details/81089453
块级元素与内联元素：
简单而言，块级元素就是第一个元素在第一行 第二个元素就从第二行开始，内联元素是所有元素都在一行，下面是display的几个属性解释。
1、display:block就是将元素显示为块级元素。
block元素的特点是：
总是在新行上开始；
高度，行高以及顶和底边距都可控制；
宽度缺省是它的容器的100%，除非设定一个宽度
<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。
2、display:inline就是将元素显示为内联行内元素。
inline元素的特点是：
和其他元素都在一行上；
高，行高及顶和底边距不可改变；
宽度就是它的文字或图片的宽度，不可改变。
<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。
3、display:inline-block将对象呈递为内联块级对象。
display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。
inline-block的元素特点：
将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。
(准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性)
1.背景图片的位置以及大小调整：
<背景图片的插入> ：在css中直接用body{background(-imag): url( ) }进行插入即可，同时要注意在css中p body h 等元素都是直接接括号。
<一些常用属性> ：
图像在水平方向上平铺：background-repeat：repeat-x；
图像不平铺：background-repeat：no-repeat；
图像大小：background-size ：100px(宽） 100px(高)；
：cover (图片完全覆盖背景区域)；
：25%(背景图片重复4张)；
：50%（宽占一半） 100%（高占满背景图片框架）；
图像位置：background-position ：center/right center；
：50%(水平位置） 50% (垂直位置）；左上角为0% 0%，右下角为100% 100%；
：10px(水平方向像素) 20px(竖直方向像素);
：inherit(继承父元素的位置)；
这里说下boder-image属性：
border-image-source: url( );
border-image-slice: 50% 50%;(图像的边界向内偏移)
border-image-width: 30 30;(图像边界的宽度)
border-image-outset: 20px 20px 20px 20px( 边框上下左右离内部的距离)
border-image-repeat: stretch
(默认值，拉伸图像来填充) /repeat(平铺)/round(缩放图像；来适应区域)
3.有特别效果的属性
<给盒子添加阴影边框>
基本格式：
box-shadow：10px (向右边移动的阴影 ) 10px(向下边移动的阴影) 10px(虚化的距离) 10px（阴影大小）#888888(颜色) inset（从左上角开始阴影）
再加一些hover属性就比较好看了，如果把背景调暗一点，边框阴影再用个亮点的颜色会有一种荧光的效果，我有一次的网页用的画布做的星星动态背景，然后加的这个效果感觉还蛮有意思的：
4.html字体及文本格式：
在网页中一般要用中文，这里要在<head>中添加一个解码标签（一般添加utf-8），防止出现乱码：
先列举一些基本的标签：
<b> 粗体，是html自带的加粗，一般可以用font-wegiht属性来直接调整到你想要的加粗程度
<big> <small> 字号大小设置，也是html自带的标签，可以用css的font-size来设置
<ins> 插入字
<del> 删除字
<em> 着重字
<br> 换行，等效的调整行之间的距离，可用line-height来设置
<hr/> 创建水平线，这里html里面没有直接添加竖直线的标签，一般用
<style>
.box{
border-left: 1px solid #CCCC99;*/上边框/*
border-right: 1px solid #CCCC99;*/右边框/*
border: 1px solid black;*/整个边框/*
}
</style>
<div class="box"> </div>
<table style="height:60px;border-color:000000;border-left-style:solid;border-width:1px"><tr><td valign="top"></td></tr></table>
文本对齐：text-align：center/left/right/justify(每行宽度相等，左右外边距对齐;
字体大小设置：font-size：10px/10em
这里说一下px像素和em的区别：（这个链接讲的比较清楚：https://www.cnblogs.com/leejersey/p/3662612.html
国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，
- IE无法调整那些使用px作为单位的字体大小，像素px是相对于显示器屏幕分辨率而言的；
- 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
- Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
text-decoration:overline 文字上部分的线
line-through文字中间的划线
underline文字下面的划线
none去下划线
text-transform:uppercase 全部大写
lowercase 全部小写
capitalize 每个单词第一个字母大写
text-indent ：50px 第一行文本缩进
letter-spacing：字符间距
line-height: 行高
word-spacing 单词之间的空白
white-space：nowarp 禁用文字环绕
6.优先级问题：
元素样式优先级从低到高排序：
通用选择器（universal selector），用通配符表示，如 * {boder:0px solid black}
元素选择器（element selector），如 div {boder:0px solid black}
类、属性或者伪类选择器，如 .c10 {boder:0px solid black}，:hover {…}
ID选择器，如#i100 {boder:0px solid black}
HTML元素的style属性
加了 !important的规则，如 #i100{border:6px solid black !important;}
7.opacity与rgab设置透明度的区别
首先，opacity是css3的属性，ie低版本不支持，ie支持RAGB透明效果，ragb(a,b,c,0.1）前面三个为rgb的颜色值，最后一个为透明度。
opacity 是元素透明，而子元素也都透明，如：div在红色背景透明度为0.5，可是div里的文字也变得透明，而用RGAB实现透明效果，只改变元素本身的透明效果，文字没有变透明。
关于配色的的网站：https://encycolorpedia.cn/ab5585
十六进制颜色名转rgb：http://www.yuangongju.com/color
选择器的优先级从低到高：
浏览器提供的默认样式表。
用户自己加的样式表（PS：什么意思）
<link>元素中引入的样式表
<style>元素中以@import引入的样式表
<style>元素中的样式表，即写在html页面中的样式表
8.设置元素居中
给定宽元素设置margin:0 auto，出现设置无效的原因:
1.float会导致margin:0 auto无效
2.必须要有width
给不定宽元素设置水平居中：
1：将要居中的元素加入到table标签中的td标签里面
2：将块级元素设置成内联元素，display:inline 然后利用内联元素的text-aligin:center
3: 设置父元素position:relative ，display:inline-block,margin-left:50%,子元素margin-left:-50%
或者css3设置定位居中：
父元素：position：relative;子元素position：absolute;left:50%;top%;transform:translate(-50%,-50%);
*<script>的放置位置：*
script可以放置于任何位置，但是html是从上到下解析的，将<script>标签放到前面会导致找不到id等，一般将<script>
标签放到</body>的后面
扫一扫
1795
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
