body{hei"/> body{hei">
Home > Article > Web Front-end > Summary of some knowledge points about HTML and CSS
html: Hypertext Markup Language
Through semantic tags, Build the page "structure"
css: Cascading style sheet
is responsible for the page "style" and beautify the page
js: lightweight scripting language; interaction refers to two places (behavior)
The front-end itself The "animation effect" written on the page
"data interaction" in the front and backend
The combination of structure, style, and behavior
Embedded; (embedded)
<style> body{ height:100%; background-color: red; } </style>
Inline style
<body style="height:100%; background: #333333">
External link type (real development, all external links are used)
<link rel="stylesheet" href="style.css?1.1.11"/>
Inline>Inline>External link
When the setting is wrong, in the chrome control There will be a yellow exclamation mark as a prompt
color: color value; there are three ways to express color
Shortcut key: c+tab
In English: red
rgb(255,0,0)
#fff
font:400 14px/28px "宋体";
Picture default Is horizontal repetition and vertical repetition
##text-decoration: none; remove underline
text-decoration: underline;Add underline
Selector in css:
##Disadvantages: Only common operations can be performed, and individual operations cannot be performed
2.class selector
#id name
In the real development process, class is used to set styles, and id is used to obtain elements
<div class="div1 div2 div3" id="div1"></div>
4. Descendant selector: div p (select all p elements of descendants under the div container)
div > p:first-child
padding是内边距
padding的颜色和内容的颜色一致;background-color填充的是border以内的颜色
padding是复合值
padding:30px; ->pl30; pt30;pr30;pb30
padding:20px 30px; ->上下为20px 左右30px
padding:10px 20px 30px; -> 上10px 左右20px 下30px
padding:10px 20px 30px 10px; 上 右 下 左
如果现设置padding:30px
再设置padding-left:10px
请问最后的值各是多少?
左10px; 其他都是30px
margin:外边框
border:
border:1px solid #000;
border-width
border-style:solid(实体),dashed(虚线),dotted(点)
border-color
p标签虽然是文本标签,但是它可以当容器来使用,p标签内一定不能放div; p段落也是块元素,他独占一行
文本元素:p span a i em u b strong img
容器级:div li dt dd h级(不建议)
除了p,所有的文本元素,都是行内元素
所有容器级别的元素,都是块元素
块和行内元素的相互转化
display:inline; //行内
display:inline-block;//行内块
display:block; //块
关于定位:大部分情况,建议的是:父相子绝(父亲:相对定位,儿子:绝对定位)
关于脱离文档流的方法
浮动 float:left; float:right;
绝对定位 position:absolute;
固定定位 position:fixed;
重点:1)父相子绝 2)行内元素一点脱离文档流,就可以设置宽高了;
注意:行内元素,一旦脱离文档流,虽然能设置宽高,但是,如果不设置宽的话,会默认跟内容一样宽;而块级元素,如果不设置宽度的话,默认跟父级一样块,没有父级的话,默认跟屏幕一样宽
清除浮动
固定高度height:xxxpx;
缺点:如果作为产品列表的容器展示,我们无法知道容器的具体高度
overflow:hidden
clear:both
缺点:可以解决浮动引起的文档流错乱问题,但是上面浮动元素的父容器该没有高度还没有高度
伪类清除浮动
ul::after{ display: block; height:0; content: ''; clear: both; }
溢出隐藏
清除浮动
缺点:如果父容器比较小,子容器比较大;父容器如果通过overflow:hidden来清除浮动的话,子容器就看不到了
透明度处理
rgba() 背景透明,文字不透明;
opacity:0 背景透明,文字也透明;
opacity:0.1;/*不兼容IE7浏览器*/ filter:alpha(opacity=10);
images文件夹:放切好的图片
css文件夹:放置css文件:index.css
index.html文件
宽度继承:如果没有父级,块元素的宽度默认跟可视区一样宽;如果有父级的情况下,默认跟父级宽度一样宽(宽度可以继承,但高度无法继承;)
font可以继承
color可以继承:当遇到a标签的时候, color无效;
line-height可以继承
单行文本出超固定宽度出现省略号的写法:
white-space:nowrap; overflow:hidden; text-overflow:ellipsis
英文不折行的问题处理: word-wrap:break-word;
出现滚动条的写法overflow-y:scroll;
伪元素:用:和::都可以,现在建议用::
伪类:给当前选择器添加动效,只能用:
The above is the detailed content of Summary of some knowledge points about HTML and CSS. For more information, please follow other related articles on the PHP Chinese website!