HTML+CSS学习笔记（全）

浅浅的花香味﹌ 2022-05-15 16:36 153阅读 0赞

特点！！行为  样式 结构 相分离

**浏览器(主流：在市场上有一定市场份额，有独立研发的内核)**

浏览器分两部分：

shell                           内核

IE                               trident

Firefox                       Gecko

Google chrome          Webkit/blink

Safari                         Webkit

Opera                        presto

**（层叠样式表格）**

**html** **css** **javascript**

**结构****样式****行为**

www.baidu.com(域名)  --  dns(解析)   --   192.168.000.001（地址）

**css权重（256进制,多个直接进进行相加（派生选择器/父子选择器））**

**！important（Infinity）>行间样式（1000）>id（100）>class|属性|伪类（10）>标签选择器|伪元素（1）>通配符（0）**

**凡是带有inline的元素，都带有文字特性**

标签的分类

**1.行级元素（内联元素） display=inline**

feature：      内容决定元素所占位置

不可以通过css改变宽高

举例：span  strong  em  a  del

**2.块级元素 display=block**

feature：    独占一行

可以通过css改变宽高

举例： div  p  ul  li  ol  form  address

**3.行级块元素 display=inline-block**

feature：  内容决定大小

可以通过css改变宽高

举例：  img

**body自带8px margin**

盒模型 层模型 浮动模型（float：left right ）

盒子模型 (margin +border+padding+(content=width+height))

盒子壁  border

盒子内边距  padding

盒子内容区  width+height

外边距 margin

Padding:四个参数：上右下左 三个参数：上 左右 下

**定位：**

position：absolute

left: 100px

top: 100px

/right  bottom

层模型：

absolute:（定位技术）

脱离原来位置进行定位（释放原来位置）

**相对于最近的有定位的父级进行定位**

**如果没有，那么相对于文档进行定位**

relative（参照物）

保留原来位置进行定位

相对于自己原来的位置进行定位

fixed

位置不动

position=fixed;

left:50%;

top:50%;

margin-left:-width\*0.5;

margin-top:-heighr\*0.5;

**经典bug:**

bfc:  block format context(块级格式化上下文)

触发盒子的bfc：

1.  margin塌陷（垂直方向margin结合在一起，父子同时变化）

(强加border)

触发一个盒子的bfc：

position：absolute

display;inline-block

float:left/right

overflow:hidden （溢出部分隐藏）

2.margin合并（区域不能共用，兄弟方向margin合并）

不解决

<!-- 浮动元素产生了浮动流

所有产生了浮动流的元素，块级元素看不到他们

产生了bfc的元素和文本属性类元素（iniline）以及文本都能看到浮动元素 -->

伪元素：(行级元素)

\*\*：：before\{

content:””;  
\}

\*\*：：after\{

content:””;  
\}

清除浮动

\*\*::after\{

content: "";

clear: both;

/\*只对块元素有效\*/

display: block;

/\* position: absolute;float: left;right: ;

自内部把元素转换成inline-block\*/

**行级元素只能嵌套行级元素**

**块级元素可以嵌套任意元素  <p>除外<a>不能嵌套<a>**

**默认文字大小16px**

**<!-- 溢出容器，打点展示**

**1.单行文本**

**2.多行文本   只做截断不做打点-->**

/\*除去换行\*/

white-space: nowrap;

/\*溢出隐藏\*/

overflow: hidden;

/\*...形式展示\*/

text-overflow: ellipsis;

margin: 0 auto; （父子级，都是块级元素，放于子块中，使其居中）

*语句：*

font-size: n px （设置字体大小（高））

font-weight: normal  (bold 加粗 100 200 -900逐渐变粗)

font-style：italic （斜体）

font-family:arial （字体 alrial乔布斯发明。第一件贡献是字体）

color; (设置字体颜色 ：

1.土鳖式(纯英文) color:red

2.颜色代码 color:\#f40;

3.颜色函数 rgb(255,255,255)

R red G  geeen B  blue

00-ff  00-ff             00-ff (饱和度)

\#ffffff 白色

\#000000 黑色

transparent(透明色)

)

border: n px  solid color; (加边框)（border-width  border-style(solid实线dotted点状虚线dashed条状虚线)  border-color）

(画三角)

border-left;

border-right:  
border-top;

border-bottom;

text-align:left center right (对其方式)

line-height: n px (文字所占像素)

height=line-height (当行文本垂直居中)

text-indent：2em (首行缩进 1em=1\*font-size)

text-decoration: line-through; (中划线none无线underline下划线overline上划线resize)

cursor:pointer （pointer小手help?）

opacity: 0-1 (透明度，0到1之间)

list-sttyle:none (去掉li标签前的圆点)

//伪类选择器

a:hover\{

background-color:red; (当鼠标移入是改变颜色)

color：\#fff;

border-radius:10px; (50%为圆)

z-index：1 (z轴，默认0)

clear:both (清除浮动流，必须是块级元素)

white-space: nowrap; (失去换行功能)

target=\_blank; (在新的界面中打开)

vertical-align: middle; （对齐线）

HTML+CSS学习笔记（全）

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 HTMLCSS学习笔记（二十三）GRID布局

相关 HTMLCSS学习：移动端项目准备工作（笔记二十）

相关最全SpringMVC学习笔记

相关机器学习Google课程学习笔记（全）

相关 HTML+CSS学习笔记（全）

相关 dubbo学习笔记三（全注解）

相关 PHP全栈学习笔记32

相关 PHP全栈学习笔记28

相关 PHP全栈学习笔记15

相关 PHP全栈学习笔记2