02 前端篇(选择器和属性)

http 协议:

超文本传输协议,基于请求/响应模式

无状态协议(短连接,无记忆)

url:统一资源定位符

post 有请求体, get 没有请求体

referer:请求来自那个页面。放在请求头部

Content-Typeurl编码方式,放在请求体里面的

cssCascoding Style Sheets,层叠样式表

四种引入方式:

行内式

嵌入式

链接式(推荐)

导入式

css 的选择器(selector):

基础选择器:

*  通用元素选择器

             E  标签选择器

             .info E.info class选择器。匹配所有class属性中包含info的元素  .info {color: Yellow}   p.info {color: Yellow}

             #info id 选择器

组合选择器:

E,F :多元素选择器,同时匹配所有E元素或F元素,用逗号分隔

               E F:后代元素选择器,匹配所有属于E元素后代的F元素,EF之间用空格分隔

E>F:子元素选择器,匹配所有E元素的子元素F

E+F:毗邻元素选择器。匹配所有紧随E元素之后的同级元素F

属性选择器E[att]:匹配所有具有att属性的元素,不考虑它的值

            E[att=val]:匹配所有att属性等于val的元素

            E[att~=val]:匹配所有att属性具有多个空格分隔的值,其中一个值等于val的元素

            E[att^=val]:匹配属性值以指定值开头的每个元素

            E[att$=val]:匹配属性值以指定值结尾的每个元素

            E[att*=val]:匹配属性值中包含某个特定值的每个元素

伪类选择器 before

             after

             

嵌套规则:

  1.  块级元素可以包含内联元素或某些块级元素,但内联元素不能包含块级元素,他只能包含其他内联元素;
  2. 块级元素不能放在p里面
  3. 有几个特殊的块级元素只能包含内联元素,不能包含块级元素。如:h1pdt
  4. li 内可以包含div
  5. 块级元素与块级元素并列,内联元素与内联元素并列

id #class .

id class 的区别是 :id是唯一的,class 可以给多个标签

css 常用属性:

颜色属性1. 颜色单词 2. #cc3399 3. rgb0,0,04. rgba(155,200,40,0.8)

字体属性:font-size font-stylefont-familyfont-weight

背景属性:background-colorbackground-imgurl12.jpg);

background-repeatno-repeat/repeat-x/repeat-yy轴重复)/repeat

background-size300px 300px

background-positiontop center

综之:backgroundurl“12.jpg”no-repeat 100px 100px red;

文本属性:text-aligncenter

          line-height100px

letter-spacing5px

word-spacing10px

text-transformcapitalize

边框属性:border-stylesolid

          border-colorchartreuse

          border-width20px

          简写:border30px rebeccapurple solid

列表属性:ulol{

               list-styledecimal-leading-zero

               list-stylenone/circle/upper-alpha/disc

}

display属性:noneblockinline

盒子模型(外边距和内边距):

    border:围绕在内边距和内容外的边框

    padding:控制内容与边框的距离

    margin:用于控制元素与元素之间的距离

    content:内容,显示文本和图像

总结:

块级标签:<div> <p> <h1-6> <ul> <ol> <dl>

内联标签:<a> <img> <input> <span> <select> <textarea>

正常文档流:将元素(标签)在进行排版布局的时候按着 从上到下 从左到右的顺序进行排版的布局流。

脱离文档流:将元素从文档流中取出,进行覆盖,其他元素会按照文档流中不存在该元素重新布局。

float:浮动(非完全脱离)

如果上一个标签也是浮动标签,就会紧随在上一个标签后面

如果上一个标签不是浮动标签,就会保持垂直距离不变,一直顶在最左面

positionabsolute| fixed   定位(完全脱离)    relative|static(不脱离文档流)

static:默认值static,无特殊定位,对象遵循正常文档流

relative:对象遵循正常文档流,但将依据 topbottomleftright等属性在正常文档流中偏移位置(以原来的位置为基准)

absolute:对象脱离正常文档流,以最近的非 static属性的父亲位置为基准进行移动

fixed:固定在某个位置,不论窗口是否滚动

clearnone|left|right|both

none:默认值,允许两边都有浮动对象

left:不允许左边有浮动对象。如果有了,我下去

right:不允许右边有浮动对象

both:不允许有浮动对象

知识点回顾:

  1. maigin0 auto; 实现块级标签水平居中
  2. 块级标签与内联标签的转换:displayinline-block | inline|block
  3. block:独占一行;可以设置widthheight属性;可以设置margin padding属性
  4. inline:不会独占一行,多个相邻的行内元素会排列在同一行;设置 widthheight属性无效;margin padding 属性只在水平方向有效果,竖直方向不会产生边距效果。
  5. inline-block:将对象呈现为 inline 对象,但对象内容作为block对象呈现。之后的内联对象会被排列在同一行内。有block的宽度高度特性又有inline的同行特性

猜你喜欢

转载自www.cnblogs.com/mlllily/p/10356942.html