HTML+CSS标签的属性及应用

结构化标准语言(HTMLHTMLHTML和XMLXMLXMLXMLXMLXMLXML)

表现标准语言(CSS)C

块级标签:divdiv、ulul、lilili、dtdl、dldt...

行内标签:spanspan、inputinput、imgspanimg...

行为标准语言(DOMDOM和ECMAScriptECMAScriptE)

盒子模型==网页布局的基石

外边距(margin)边框(borderborder)内边距(paddingpadding)left、left right、right、bottombottom

如果设置的是外边距(以顺时针方向设置):给44个值(上、右、下、左),给定三个值(上、左右、下),给定两个值(上下、左右)、给定一个值(就是4个方向的外边距是一样的)

auto会根据浏览器的宽度自动地设置两边的外边距width:100%;margin:0 auto;width:100%;margin:0 auto;;如果设置了自动居中还设置了floatfloatfloatfffffloat(浮动)或者position:absolute;position:absolute;当元素没有设置宽度值,而设置了浮动属性,元素的宽度随内容的变化而变化。

清除浮动的方法:

1.clear属性--常用clearclear:bothboth;clearclear:leftleft;或者clearclear:rightrightright;

2.同时设置widthwidthwidth:100%100%width(或者固定宽度)+overflow+overflow:hidden;

横向两列布局

主要应用技能:floatfloat属性-----------使纵向排列的块级元素,横向排列

绝对定位布局:通过设置positionposition属性实现

能够实现横向布局及较为复杂的定位,有三种定位形式:1.静态定位 2.相对定位 3.绝对定位

可以设置4个属性值:

static(静态定位)

relative(相对定位):相对于自身原有位置进行偏移,仍处于标准文档流中,随即拥有偏移属性和z-indexz-indexz属性

absolute(绝对定位) :建立了以包含块为基准的定位,完全脱离了标准文档流,随即拥有偏移属性和z-index属性,当一个元素设置了绝对定位,该元素的快读随着内容的变化而变化。

无已定位祖先元素,以<html><html><><>为偏移参数基准;有已定位祖先元素,以距其最近的已定位祖先元素为偏移参照基准。

fixed(固定定位)

时间: 2025-01-05 07:13:22

HTML+CSS标签的属性及应用的相关文章

常用CSS标签1——属性

一.属性 1.字体 font 1)font: font-style; font-variant; font-weight; font-size; font-height; font-family. 2) color: 指定颜色,写法: 十六进制值(或者简写): rgb()函数: css承认的颜色名. 3)font-family: 在后面直接输入名字,如果有英文,尽量用引号引起来. 4)font-face(导入外部字体) @font-face{ font-family src:url("url&q

css标签属性及用法

css标签及属性 HTML引入CSS的方法 1.嵌入式  <style type = "text/css">要写的样式</style> 2.外联式  <link rel = "stylesheet"  type = "text/css"  href = "css/public.css"  /> 3.行内式(主要用于JS控制元素的样式):style="color:red;"

CSS和JavaScript标签style属性对照表

CSS和JavaScript标签style属性对照表一般情况是把"-"去掉,第二个字母用大写. CSS语法 (不区分大小写) JavaScript语法 (区分大小写) border borderborder-bottom borderBottomborder-bottom-color borderBottomColorborder-bottom-style borderBottomStyleborder-bottom-width borderBottomWidthborder-colo

CSS和Java script 标签style属性对照表

CSS和Java script 标签对照表 盒子标签和属性对照 CSS语法 (不区分大小写) Java script 语法 (区分大小写) border border border-bottom borderBottom border-bottom-color borderBottomColor border-bottom-style borderBottomStyle border-bottom-width borderBottomWidth border-color borderColor

CSS 和 JavaScript 标签 style 属性对照表

CSS 和 JavaScript 标签 style 属性对照表: 盒子标签和属性对照颜色和背景标签和属性对照样式标签和属性对照文字样式标签和属性对照文本标签和属性对照   CSS语法(不区分大小写) JavaScript语法(区分大小写) border border border-bottom borderBottom border-bottom-color borderBottomColor border-bottom-style borderBottomStyle border-bottom

CSS和JS标签style属性对照表

盒子标签和属性对照 CSS语法(不区分大小写) JavaScript语法(区分大小写) border border border-bottom borderBottom border-bottom-color borderBottomColor border-bottom-style borderBottomStyle border-bottom-width borderBottomWidth border-color borderColor border-left borderLeft bor

Canvas标签width属性和css的width属性

本篇只是一个渣渣写的笔记,要说的都在代码中的注释中,在我看来不求甚解的话没准根本不知道两者的区别更好 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Canvas标签width属性和css的width属性</title> <style type="text/css"> .mycanvas { border:

CSS的display属性

网页设计中最常用的标签p.div.h1-h6(默认为块级元素),span(默认为内联元素) 1.把元素显示为内联元素和把元素显示为块级元素 <style type="text/css"> div{ display:inline; background:red;}/*区块元素将转换为内联元素*/ span{ display:block; background:green;}/*将内联元素转换为区块元素*/ </style> </head> <bo

CSS中transform 属性

CSS中transform 属性允许你修改CSS可视化模型的坐标空间.通过transform,可以让元素进行移动(translate).旋转(rotate).缩放(scale).倾斜(skew). 如果该属性有一个非none值, 将会产生一个层叠上下文. 在这种情况下 对象将作为它包含的 position: fixed 元素的包含块(a containing block). 初始值 none 适用元素 transformable elements 是否是继承属性 否 Percentages re

CSS浮动(float)属性学习经验分享

作为一名前端开发的初学者,CSS的布局定位无疑成为了一个难点,这两天通过看一些博客的技术分享和自己的反复实践,大概领悟到了一些float的“门道”. 下面就通过一些例子来归纳总结一下我所学到的浮动特性: (一)浮动元素对其兄弟元素是标准流元素的影响: 现在假定HTML文档中从上到下有3个块元素A.B.C 1.现设定A.C为标准流中的元素,B设为float:left (注:为了更直观地显示,设B的透明度为0.5,B是在C上方的) 由此可见:将B设为浮动元素后,B脱离了标准文档流,浮于其上方,因此他