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

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

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

相关推荐

  • css涉及的英语单词!

    Css(cascading  style sheet)  (级联样式表) a:active 单击鼠标左键 italic(倾斜) word-spacing  单词和单词之间的距离 underline下划线    Font-size文字的大小 Background-color:背景颜色 Background-attachme...

    2018年4月28日
    0750
  • 第六章——css部分:基本属性与CSS

    一、标签属性与样式 1、网页内容根据想要在作用选择对应在标签 2、找到对应在标签,敲空格看提示,选择对应在单词(或style)来描述该标签。 直接能够敲的出来我们成为属性(attribute),类似于字体在color等。 敲...

    2017年5月22日
    0660
  • css层叠样式表flex弹性盒模型(下)

    前言 本次主要讲的是flex弹性盒模型中项目的相关属性,容器的属性相关内容可以查看https://www.cwhello.com/6477.html 以下6个属性设置在项目上。 order flex-grow flex-shrink flex-basis flex align-self  order属...

    2018年4月28日
    01030
  • 第九章——CSS部分:层效果与溢出管理

    div称为层,更多的是因为它的z轴属性,可以实现层叠效果,例如: <div style=”position:absolute;z-index:1;left:50px;top:50px;background-color:red;”></div> <div style=”position:absolute;z-ind...

    2017年5月24日
    0741
  • css+div布局学习路线!

    自学CSS+DIV布局步骤 一、认清目的 首先要认识为什么要学习CSS,知道学习CSS目的是什么。 认识学习目的才能坚持持之以恒、认识学习目的才有目的性从中得到乐趣和享受! 二、基础学习 1、了解CSS作用是什么? 2、css...

    2017年11月7日
    0610
  • 为什么要学习CSS+DIV技术?

    首先要问人为什么要学习,为什么要有一技之长?答:时代不断变化各行各业日新月异不学习就会很快落后,活到老学到老,人要有一技之长,技为安身立命之根本。 学习CSS+DIV技术,可以让你认识互联网,认识我们每天接触...

    2015年12月1日
    0530
  • css+div布局学习步骤?

    认清目的 首先要认识为什么要学习CSS,知道学习CSS目的是什么。 认识学习目的才能坚持持之以恒、认识学习目的才有目的性从中得到乐趣和享受! 基础学习 1、了解CSS作用是什么? 2、css基础知识 3、了解常用css属性样...

    2017年12月19日
    0730
  • 我的php学习第五天之css篇

    昨日回顾 表单 主要功能:收集客户的信息。 表单的开发分两个部分:前台静态页面制作、后台PHP程序来处理。 <form name= “form1”action=“register.php”method=“GET” enctype=“application/x-www-form-urlencoded”...

    2015年10月14日
    0910

发表评论

您的电子邮箱地址不会被公开。