css盒子模型代码和模型图(第七章CSS部分)
css盒子模型代码和模型图(第七章CSS部分)
2024-11-22 07:33:55  作者:八海云月  网址:https://m.xinb2b.cn/know/enz300870.html

第一章 问题集锦:

1、ID选择器与类选择器优先级

ID选择器优先

2、CSS文件中编码问题

1)要么就删除,默认就是编辑器的编码

2)有的浏览器不识别,在编码后加上“;”

3、属性和样式是否正确

直观的办法就是保存运行,看看是否是正确;如果不正确

1)大胆的去尝试;

2)找到对应的标签,把行内样式抽取成内嵌或外链,绝对没错。

4、定位原点:

1)所有的元素都在BODY中显示,那么body的原点就是最左上角(0px,0px)

2)其他元素放到容器,那么这个容器的最左上角就是该容器的原点

3)在BODY中的标签相对于BODY定位是该标签的最左上角相对于BODY原点的x,y坐标为准


背景设置与盒子模型

一、宽(width)高(height)度设置:

1、行内元素与块元素的区别

宽高度设置对于有些行内元素无效;图片、表格有效;网页中使用的图片比较多,建议控制图片宽高度,以便控制显示内容大小(图片会缩放,最好按等比例来设置,否则会变形)

2、指定像素与百分比

一般情况下行内样式需要设置宽度的单位,比如说像素px(pixel);设置宽度为百分比可以固定宽度,比如块元素DIV,宽度不设置为100%,高度为0px(或内容的高度),以单位值固定的宽高度的标签内容超出不会在容器内显示。

二、背景(background):

背景色Background-color

背景图片 background-image:url(图片路径); 默认会水平、垂直方向重复

Url:统一资源定位符,就是资源的地址。

注意外链样式尽量不要使用图片背景,非要使用可以使用服务器根目录定位。

背景重复 background-repeat: no-repeat repeat-x repeat-y

背景吸附 background-attachment:scroll (默认,随对象滚动) fixed(固定)

<body style="background-image:url('1.jpg'); background-repeat:no-repeat;

background-attachment:fixed; height:1500px;">

asfasdfasdfsadfdsfa

</body>

背景定位 background-position:top center bottom left right x y(用于一张图片背景定位,容器不动背景图像移动!!!),例如一张图片背景定位

<div style="width:100px; height:100px; background-image:url(1.jpg); background-repeat:no-repeat; border:1px solid black; background-position:-201px -236px;"></div>

background-size:cover可以让背景图片拉伸,但是要求IE8以上版本!!!

三、盒子模型:


布局一般顺序:

1、关注内容,放内容;

2、控制内容与边框距离,Padding,内边距;

Padding(内边距,内容距离标签边框的距离,该元素的宽度=内容宽度 padding):10px; 代表上、右、下、左(顺时针)内容与边框的距离都是10PX;还可以控制内边距的上下左右距离:50px 100px;可以这样书写完全控制 padding:10px 20px 30px 40px;

3、border:外边框。可以单独写border-bottom:1px solid black; 也可以简写border:1px solid black;

4、Margin:外边距。边框距离容器的距离。Margin:10px; 类似于padding上、右、下、左,外间距,但是只有顶部、左侧有效。Margin:10px20px 30px 40px;

margin-left:100px; margin-top:100px;

5、针对于表格:cellpadding为单元格内容距离单元格边框的边距;cellspacing单元格与单元格之间的边距。


边框圆角: border-radius:50px;

<img src="anniu.jpg" width="200px" height="100px" style="cursor:pointer; border-radius:10px;" onclick="alert('haha');" />

对齐(align):

1、容器对齐:

该标签相对于容器对齐,该标签加上align属性(块元素无效);

2、内容对齐(左、右、居中、两端)

该标签的内容样式 style=”text-align:center;”

作业:利用以上知识,使用table布局以下效果


提示:

背景色: #6c6c6c

文本框提示: placeholder=”提示信息”

边框阴影: box-shadow:inset 0 0 10px gray;

  • 怎样哄女生开心的话语(如何哄女生开心的话)
  • 2024-11-22如何哄女生开心的话追女生少不了哄女生开心,一谈到这个很多兄弟第一时间想到的就是“甜言蜜语”,的确,甜言蜜语确实很有功效,能带给你们的交流很好的体验,往往能逗女孩子开心但要注意,不是任何时候的甜言蜜语都有用,也不是任何女。
  • 张爱玲冷眼一瞥中有嫌恶与悲悯(苏落盏体现了暴力美学)
  • 2024-11-22苏落盏体现了暴力美学默读:苏落盏体现了暴力美学?抱歉,我只觉得她可悲大家还记得苏落盏案吗?就是碎花裙子的那个,关于未成年少女的,现在想来仍然心惊罪恶的产业链,被欲望支配的衣冠禽兽,沉沦在黑暗中的少女……苏家母女,是罪恶源。
  • 萝卜缨盆栽种植方法(萝卜缨盆栽种植方法简单介绍)
  • 2024-11-22萝卜缨盆栽种植方法简单介绍把买来的萝卜籽,撒在花盆里,在网上、和种子店都有卖花盆里放满疏松、保水良好的土壤种子埋土里3mm左右,浇足水过几天,就冒出小苗,这就是萝卜缨,40天,叶子就可以采择下来,用盐腌起来,炒炒吃也可以凉拌吃。
  • 隐形眼镜滑片解决方法(怎样戴好隐形眼镜滑片)
  • 2024-11-22怎样戴好隐形眼镜滑片每次佩戴前,先仔细辨认隐形眼镜的正反面,隐形眼镜正反面戴反,是照成隐形眼镜滑片的一个重要因素若是发现滑片现象,动一下眼球,调整一下镜片,滑片的现象会好点的过了几天的适应期,滑片现象也会减少的选择适合自。
  • 沙溪闽江(珠江闽江汤汤清水润南天)
  • 2024-11-22珠江闽江汤汤清水润南天来源:光明日报【江河印象】无论是“岭水争分路转迷,桄榔椰叶暗蛮溪”“树拥层城水带沙,八闽南望是天涯”,还是“潮来濠畔接江波,鱼藻门边净绮罗”“借得西湖水一圜,更移阳朔七堆山”古往今来,触及岭南洞天,八。
  • 自制即食柠檬片的做法(即食柠檬片怎么做)
  • 2024-11-22即食柠檬片怎么做切片:柠檬切成薄片装瓶:把柠檬片装在瓶子里码好加蜜:然后加满蜂蜜,将柠檬片完全淹没加入蜂蜜后,柠檬片会漂浮起来,总有一点儿露在外面,可以拧紧盖子把瓶子来回颠倒几次,没有气泡了就倒着放在冰箱里,一夜就好。
  • 小米9支持刷公交卡吗(小米9系列上线长安通公交卡)
  • 2024-11-22小米9系列上线长安通公交卡IT之家4月2日消息小米9系列近日已经在小米钱包中添加了长安通公交卡,并且可以以12元限时优惠价格开卡,该卡可以享受西安公交5折、地铁9折和咸阳公交8折现在,小米9手机已支持10张交通公交卡,包括厦门。
  • 六一儿童节最好的舞蹈(新潮又魔性的六一舞蹈推荐)
  • 2024-11-22新潮又魔性的六一舞蹈推荐韵律活动是幼儿园音乐活动中必不可少的组成部分,是幼儿运用肢体动作对乐曲内容和自身情绪的表现然而,许多幼儿园在开展韵律活动时存在方式固化、单项灌输、高压高控等问题为帮助幼儿园老师高效开展韵律活动,摒弃传。
  • 海蟹的做法与清洗(海蟹清洗与做法)
  • 2024-11-22海蟹清洗与做法海蟹,粉丝1小把,辅料:葱2根,姜3片,蒜3瓣,盐半小勺约2克,生抽15毫升,油20克绿豆粉丝用冷水泡发10分钟左右铺在盘底,稍稍剪断海蟹去掉肚和腮,切块斩件摆在粉丝上,洒点盐留个底味放上蟹盖,放在大。
  • 成都聚焦乡村振兴战略(如何抓住乡村振兴战略)
  • 2024-11-22如何抓住乡村振兴战略四川在线消息(记者张红霞蒋君芳)11月12日,周日的下午一路随手拍在温江天乡社区看“股份”,在蒲江明月村里品文创,成都近500名农业“牵头人”,边走边看边思考——十九大提出了乡村振兴战略,面对这个“最。