html+css基础知识1
一.盒模型常见属性
1.margin:外边距
2.padding:内边框
3.border:边框
4.margin:50px 0 0 50px ;
上 右 下 左;
5.margin: 0 50px 0 ;(常用)
上0 左右50px 下0;
6.margin:20px 30px;
上下20 左右30
7.margin:10px;
四个方向都是10
8.margin-left: auto; margin-right: auto;
简写margin:0 auto;
上下 左右
9.margin: -20px 0 0 100px ;
要想让小盒子在大盒子内向左偏移,可 以把第一个值设置为负数.
10.overflow: hidden;
让原本的盒子保持原样不动,清除浮动带来的影响
二.
2.样式表分类
①头部样式表
<style type="text/css">
②外部样式表
<link rel="stylesheet" type="text/css" href="css/main.css">
③行内样式表(行内样式表，极差，不允许使用)
<div style=" ">
3.选择器
①id选择器 对应 css 中 # ,id唯一且不重复.
②class类名选择器 对应css中 . ,class可以多处设置.
③标签选择器，html中的<html>、<body>、<h1>、<p>、<img>等.
4.css优先级
②行内样式>头部(style)样式>=外部(link)样式
③越精确越说了算,谁大谁说了算
行内(1000)>id(100)>class(10)>标签(1),( )内为权重,权值
④!important优先级最最高,但是不到迫不得已的时候不要用
5.css常见属性
width:宽度;
height:高度;
background:是个复合属性可以括号内一起设置各种属性 也 可以单独定义设置
设置背景色
background-repeat: no-repeat;设置不平铺
background-repeat-x: no-repeat;设置横着不平铺,竖着平铺
background-repeat-y: no-repeat;设置竖着不平铺,横着平铺
color:;字体颜色 font-size: ;字体大小 chrome默认字体16px,最小支持字体12px font-weight: ;加粗 text-indent: ;首行缩进
text-align: ;设置文本水平居中 center居中 right居右 left居左
line-height: 50px;设置单行垂直居中,行高
6.行块属性
块标签 div,ul,li,ol,h1~h6,p
特点: 可以设置宽高,不可以与别人共处一行 不设置宽度的情况下,默认宽度是100%
行内标签 span,strong,a
特点: 不可以设置宽高,可以与别人共处一行 其宽高由内容撑开
行内块标签 img,input
特点: 可以设置宽高,可以与别人共处一行
6.行块常见属性
①display: block; 转化成块级元素
②display:inline; 转化成行内元素
③display: inline-block; 转化成行内块元素
三.3种定位
1.固定定位:相对于浏览器窗口定位,翻页时位置不变
2.相对定位:翻页时随着滚动条一起动,没有脱离原本的文档流 (相对于原本文档流中的位置定位,仍然占据原位置)
3.绝对定位:脱离了原本的文档流 (相对于离它最近的已定位父级进行定位,一直找到浏览器窗口位置)
4.熟悉W3C规则(标准) 嵌套原则:块里面可以放行内 行内里面不可以放块 大盒子:相对定位 小盒子:绝对定位 (外相里绝)
四.百度网页中常见属性
1.a标签点击可以进行跳转,a标签内的字体不可以在它的父级内进行设置,要直接对a进行设置.
2.弹性布局,两句一起打.
display:flex; 竖排文字变横排文字 justify-content:space-around ;
space-around ：使字的两边离外层盒子有间距; space-between: 使字的两边离外层盒子没有距离;
3list-style: none; 去掉无序列表的黑点
4.line-height: 30px; 一行字垂直居中
5color: 3388ff; 可以简写为38f
6.#nav>li 子代选择器
7.#nav a 后代选择器
8.text-decoration: none; 去掉字体的下划线
9.min-width: 800px; 不能小于800,若小于800字体会被盖住
10.ursor: pointer; 鼠标放上去变成小手
11.#iptBox>input[type="text"]{} 属性选择器
浙公网安备 33010602011771号