背景设置与盒子模型问题集锦

宽(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;

  • border:外边框。可以单独写border-bottom:1px solid black; 也可以简写border:1px solid black;
    4、Margin:外边距。边框距离容器的距离。Margin:10px; 类似于padding上、右、下、左,外间距,但是只有顶部、左侧有效。Margin:10px 20px 30px 40px;

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

针对于表格:

背景设置与盒子模型问题集锦

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;

本文来自投稿,不代表科技代码立场,如若转载,请注明出处https://www.cwhello.com/3000.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
上一篇 2017年10月25日 00:00
下一篇 2017年10月25日 08:16

相关推荐

  • css样式不仅影响搜索引擎页面展现位置还影响蜘蛛抓取频率。

    虽然用外表来判断一个人不是顾客的判断,但有时的确会给人留下良好的印象。网站也是一样的。内容是王者,这是我们不能忽视的价值。但外部视觉体验也是用户体验的参考因素。因此,SEO人员必须注意CSS风格,这使得...

    2023年2月18日
    01
  • 学习前端技术栈ServiceWorker,让你的网页变快20%。

    有些人会认为,前端不就是切图然后展示么,有什么技术含量,学前端不如学习Php,此言差矣,这些年随着互联网的发展,前端技术变得越来越重要,生态圈也越来越发达,今天我们来介绍一个前端技术栈,ServiceWorker...

    2022年7月4日 建站资讯
    0136
  • 我来分享css button点击效果。

    CSS按钮点击效果是一种常见的网页设计元素,它可以为用户提供丰富的交互体验,在本文中,我们将介绍如何使用CSS实现各种有趣的按钮点击效果,包括渐变色、阴影、动画等,我们还将探讨如何自定义按钮的样式和行为...

    2024年6月16日
    00
  • 一个成熟的前端开发者都需要哪些知识。

    首先,成为一名成熟的开发者,首先必是一位有基础的开发。 所以最基本的一些HTML、CSS、JavaScript这些基础的语法,就不详细说了。 扎实的JavaScript基础 在前端开发里,最讲究的还是在JS里,基础的语法,能运用...

    2022年7月4日 建站资讯
    0174
  • HTML、CSS、JavaScript分别实现什么功能。

    学习Web前端开发基础技术需要掌握:HTML、CSS、JavaScript,那么这三个都是分别实现什么功能的呢?下面和子瑜一起来看看吧! 一、HTML是网页内容的载体 内容就是网页制作者放在页面上想要让用户浏览的信息,可以...

    2022年7月4日 建站资讯
    02.0K
  • 7个教程和工具让你开始使用CSS网格。

    自从CSS Grid的出现它就变得很受欢迎,它甚至被我们行业最新的官方流行语所引用。谈论着它是未来的网页设计和布局。我可以滔滔不绝地说,当狂热发生的时候,没有使用网格的人会被抛在后面,维基百科的互联网先驱...

    2023年2月14日
    01
  • 我来分享css怎么设置阴影效果图。

    CSS阴影效果是CSS3新增的一个非常实用的功能,它可以为元素添加立体感和深度,使得页面更加美观,本文将详细介绍如何使用CSS设置阴影效果,包括内阴影、外阴影、线性阴影和径向阴影等。 一、内阴影(Inset Shadow)...

    2024年6月15日
    00
  • 经验分享cssbutton。

    CSS按钮是一种使用CSS(层叠样式表)来设计和样式化网页上的按钮的方法,通过使用CSS,我们可以轻松地改变按钮的外观、大小、颜色、形状等属性,从而使其与网站的整体风格相匹配,CSS还可以帮助我们实现一些高级效果...

    2024年6月20日
    00

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息