Home > Article > Web Front-end > Basic knowledge points of HTMLl and CSS_html/css_WEB-ITnose
1.HTTP:超文本传输协议
HTTP请求(HTTP request)部分:
HTTP响应(HTTP response)部分:
2.常见特殊符号
3.常见块级元素和内嵌元素
块级元素:块级元素定义的文本会换行;
div,列表系列(ol,ul,dl),fieldset,form,p,h1-h6,hr,table
内嵌元素:内嵌元素定义的文本不会换行,
span,a,img,lable,input系列,iframe,object
4.css选择器及权重问题:
1 1 1 1
元素 1 列如:p{}
类,属性及伪类 1 列如:.class{};input[type=text]{};
id 1 列如:#id{};
内嵌 1 列如:
!important 其权重最高,没法比较
5.css 继承
可以继承:
所有元素可以继承的:visibility和cursor;
列表元素可继承的:list-style、list-style-type、list-style-position、list-style-image;
内联元素可继承的:color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration等等;
其他可继承属性:text-align,text-indent;
不可继承的:display、margin、border、padding、background、height、widthoverflow、position、left、right、top、bottom、z-index、float、clear等等;
6.css盒模型:
margin:盒模型的外边距,书写为margin:10px 10px 10px 10px ;分别代表了上、右、下、左的外边距属性,也可以写为margin:10px ;
还可以写为:margin-left:10px ;表示左边的外边距; margin:10px 22px; 前一个属性表示上下的外边距,后一个属性表示左右的外边距;
注意:在写外边距的时候,如果有两个靠在一起的,它们的左右外边距是相加的,但是上下的外边距会只取最大的外边距;不会将两个外边距的属性相加;
并且margin 还可以有负边距 ;
border: 边框 , 书写方式同margin 类似的 只是border可以设置颜色和样式 ,书写:
border: 5px solid; border: 5px dotted red; border:5px dashed; border:5px double; border: 5px ridge; 等等样式
padding:盒模型内边距,书写方式与margin类似,只是在写padding 的时候会影响内部文字的排版,并且padding有负边距的写法;
列如:
没padding的时候: padding:10px;
注意: 书写盒模型的padding的时候,给元素添加了padding 会使得盒模型的整体都添加与bottom同等的尺寸;
7.浮动:float
The value of float can be: none / left/right none is the default value left means floating the element to the left; right means floating the element to the right;
Note: is used when using When floating, because the floating element will break away from the normal text document flow, that is, the element is no longer in the normal document, if there is content behind it, the original position of the element will be filled; so in order to prevent the subsequent elements from being Occupy the position of the element, clear and float the required floating elements, and use clear to clear the floating effect;
When an element is floated, the element will be regarded as block level;
Floating If the width of an element is not set, the element will be collapsed to the minimum width;
Floating elements will only move within the parent element and will not pass through the padding of its parent element;
Floating elements will not overlap;
8. Positioning: position
The value of position can be: static (static positioning) relative (relative positioning) absolute (absolute positioning) fixed (fixed positioning)
Except for static (static positioning) and relative (relative positioning), the positioning will not break away from the document flow, and other positioning will break away from the document flow;
Note: absolute (absolute positioning) is positioning absolute to the parent, so when using absolute positioning (absolute positioning), you must pay attention to whether the parent is positioned. If the parent is not positioned, it will Look up layer by layer until you find the positioned one. If all the parents are not positioned, the positioning of the element will be absolutely positioned relative to the body;
Where is the positioning of fixed (fixed positioning) The layers will be positioned absolutely relative to the body, so pay attention when using them;
9. Overflow processing: overflow The value is visible (this value is the default) /hidden (hidden) /scroll (add scroll bars if it is exceeded) /auto (crop the content and add scroll bars only when necessary)
Where overflow can also only Crop or add scroll bars for overflow in the x or y direction;10. Visibility settings: visibility and display
The value of visibility is visible/hidden/inherit (inherit the parent display attribute)
Note:
visibility will also be retained when defining the attribute display space;The value of display is none (which means hiding, and the original position will not be retained)/block (which means display, and the element is converted to block level)/inline (which can also be displayed, Just convert the element into an inline level)/inline-block (show, while converting the element into an element that can have block and inline attributes)