web前端基础1

    html  Hypertext  Makeup language --结构  超文本标记语言

    css  Cascading Style  Sheets  --样式    层叠样式表

    js    javascript--行为

<!doctype html>  申明文档类型

<title>网页标题</title>  网页标题

<meta  charset="utf-8" />  代码编码类型

<link href="hyy.css"  rel="stylesheet">引入外部样式表

background :green url(img/icon.gif)  no-repeat 20px  70px fixed;

no-repeat为不重复、repeat-x表示x方向即水平方向重复,repeat-y表示y方向即竖直方向重复

20px(控制水平方向x轴)  70px(控制竖直方向y轴)

也可以给background 设置center表示居中 ,或者百分数,代表占据多少

fixed 表示固定,图片的位置不会跟着滚动条的改变而改变。

上面的写法等同于:

background-position:20px  70px;    //背景图位置

background-repeat:no-repeat;    //背景图是否重复

background-image:url(img/icon.gif);//背景图

background-color:gray;//背景颜色

background-attachment:fixed;//背景是否滚动

boder:1px  solid  green;

边框样式 

solid 实线

dashed  虚线(有兼容性问题)

dotted  点线(有兼容性问题,IE6不兼容)

上面的写法等同于:

border-top-width:1px;

border-bottom-width:1px;

border-right-width:1px;

border-left-width:1px;

border-right-style:solid;

border-left-style:solid;

border-top-style:solid;

border-bottom-style:solid;

border-left-color:green;

border-right-color:green;

border-bottom-color:green;

border-top-color:green;

也可以写成:

padding:top right  bottom left;

padding:上下 左右;

padding:上 左右  下;

padding:30px;上下左右都为x;

也可以写成:

padding-top  上边内边距;

padding-bottom 下边内边距;

padding-right  右边内边距;

padding-left 左边内边距;

内边距相当于给盒子加了填充厚度会影响盒子大小

如果给盒子加了内边距,又不想盒子的大小受影响的话,可以给盒子的宽和高减去对应的内边距大小

margin和padding一样,方向都是上、右、下、左。

外边距存在的问题:(1)上下外边距会叠压

也就是说两个相邻的元素同时写margin-top和margin-bottom,此时内边距会叠压而不是距离相加

(2)当父级元素包含子级元素,给子级元素设置margin-top,此时margin-top会传递给父级,也就是说相当于给父级设置margin-top,子级没有效果;解决方法就是将给父级设置padding-top并将父级高度减去padding-top的高度;

margin-left:auto;这句话的作用是无论你怎么调整窗口大小,都将元素设置到网页的最右边;同理

margin-right:auto;这句话的作用是无论你怎么调整窗口大小,都将元素设置到网页的最左边;

同时加margin-left:auto;和margin-right:auto;则代表无论你怎么调整窗口大小,都会使元素至于网页中间。

盒模型

 

盒子大小=border+padding+width/height;

盒子宽度=左border+左padding+width+右border+右padding

盒子高度=上border+上padding+height+上border+上padding

 

 

 

 

 

 

 

 

 

 

 

 

  

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值