盒样式相关

盒的基本类型,在css中使用display属性来定义盒的类型。liline型 block型,liline-block型。:
1:liline型元素的宽度只等于其中内容的宽度,每一行可以占据多个liline型元素。
block型元素的宽度为整个浏览器的宽度,每一行只能有一个block型元素。
liline-block型元素属于block型盒子,但同时具有inline型盒子的特点。,能指定元素的宽高。
2:使用inline-block可以实现分列显示,默认情况下使用inline-block型时并列显示的元素的对齐方式为底部对齐,未来改变对齐方式为顶部对齐可以在
元素的样式中加入vertical-align属性。如果需要去除两个元素中间的空隙,还需要消除换行符。
3:使用inline-block类型来显示水平菜单。在css2.1之前,水平菜单的实现需要使用浮动。使用ul li 来实现。
但是使用liline-block同样能实现水平菜单, 同时可以除去li的点号。
设置padding的上下值也能使元素居中、
怎样改变liline-block元素之间的距离?
4:inline-table类型: 因为table元素是block类型,所以不能和其他元素处于同一行,但是将table元素修改为inline-table类型就可以使表格和其他元素处于同一行了,但在不同浏览器
中对齐方式不同,可以使用inline-table 来改变对齐方式。
5:liline-item :将元素的display属性改为inline-item可以使元素作为列表来显示,同时可以设置列表的标记。
list-style-type可以设置列表的标记。
6:run-in类型与compact类型:将元素设置为这两种类型,如果后面还有block类型的元素,run-in类型的就会被包含在block元素的内部。
compact类型的元素就会在block类型元素的左边。
对于盒中容纳不下的内容的显示。
指定了盒子的宽高,有时会出现容纳不下的情况,可以使用overflow属性来指定如何显示容纳不下的内容
hidden隐藏,scroll出现固定的水平滚动条与垂直滚动条,visible原样输出。
overflow-x 与overflow-y可以单独设置水平方向上与垂直方向上的显示方法。
text-overflow属性设置为hidden可以将盒中内容隐藏起来,并且在后面会有省略号,但是只能在水平方向上有效;

对盒使用阴影
1:box-shadow:length length length color 前面三个length表示阴影离元素的横方向的距离、 阴影离元素的纵方向距离与阴影的模糊半径,模糊颜色。
盒内阴影:box-shadow:inset length length length length color 前两个length表示水平偏移量,垂直偏移量,展开半径,模糊半径 颜色。
可以对盒内元素使用阴影:只要在盒内的标签中加入阴影属性。
对第一个文字或者第一行使用阴影:使用first-letter选择器或者first-line选择器来只让第一个字 或者第一行产生阴影效果。

指定针对元素的宽度与高度的计算方法
在css中使用width与height来指定元素的宽高,但使用box-sizing可以指定宽高是否包括内部补白区域和边框宽度。
box-sizing指定的属性值有 content-box和border-box,content-box不包括内部补白区域和边框宽高,border-box包括。在没有使用box-sizing时默认使用content-box。
在火狐浏览器中还可以指定box-sizing的属性值为padding-box,意思是指定宽度与高度包括内容的宽高,和内部补白区域的宽高,但不包括边框的宽高。
为什么使用box-sizing属性,是为了对元素的总宽度进行一个控制,如果不使用该属性,则默认使用的是content-box,这个属性值只是对内容物的宽高进行设置没有对元素整体的宽高进行设置
,有时候使用box-sizing可以使布局更加方便。

时间: 2024-09-30 04:38:31

盒样式相关的相关文章

微信小程序尺寸单位rpx以及样式相关介绍

rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0 微信小程序尺寸单位 rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx =

html5学习篇:03.字体样式相关

1.粗体 b 2.斜体 i 3.等宽字体tt 4.小一号字体:small 5.删除线 del 6.下划线:ins 7.上标下标 sup sub 8.高亮 mark <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>段落相关</title> </head> <body> <h

css基础-css选择器和css文本样式相关

css基础-css选择器和css文本样式相关: 使用link链入外部样式,页面加载时会同时加载样式 @import url(“*.css”);使用导入式,页面加载完后,才会加载样式 链接伪类的顺序 :link-> :visited ->:hover-> :active 或者 : visited -> : link ->:hover-> :active 选择器的优先级: id选择器>class选择器>标签选择器 如果设置了同样的类样式,类样式与元素里类的顺序没

web前端入门到实战:css选择器和css文本样式相关

[文章来源微信公众号:每天学编程]---关注,后台领取编程资源 css基础-css选择器和css文本样式相关: 使用link链入外部样式,页面加载时会同时加载样式 @import url("*.css");使用导入式,页面加载完后,才会加载样式 链接伪类的顺序 :link-> :visited ->:hover-> :active 或者 : visited -> : link ->:hover-> :active 选择器的优先级: id选择器>

css 盒模型相关样式

话不多说,一切还是从最基础的说起.  盒的类型  1.盒的基本类型 在css中,用display定义盒的类型,一般分为block类型与inline类型. 例如div属于block类型,span属于inline类型 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style typ

CSS3学习系列之盒样式(二)

text-overflow属性 当通过把overflow属性的属性值设定为"hidden"的方法,将盒中容纳不下的内容隐藏起来时,如果使用text-overflow属性,可以在盒的末尾显示一个代表省略号"-".但是,text-overflow属性只在当盒中的内容在水平方向上超出盒的容纳范围时有效.例子如下: <!DOCTYPE html> <html lang="en"> <head> <meta cha

css盒模型相关知识一

1:css盒模型分类 标准盒模型,IE盒模型 2:标准盒模型与IE盒模型的区别 元素框的总宽度=width+(padding-left+padding-right)+(border-left+border-right)+(margin-left+margin-right) width+padding+border+margin 注意:CSS样式中写的width=200px就是指图中的content的宽度,如何设置padding,border的宽会影响总宽度 元素框的总宽度=width(paddi

盒模型相关面试题

㈠基本概念是什么? ⑴页面就是由一个个盒模型堆砌起来的,每个HTML元素都可以叫做盒模型,盒模型由外而内包括:边距(margin).边框(border).填充(padding).内容(content).它在页面中所占的实际宽度是margin + border + paddint + content 的宽度相加.⑵盒模型有两种:标准盒模型和怪异盒模型(IE盒模型) 有关盒模型的相关知识可以看我的这篇博客:https://www.cnblogs.com/shihaiying/p/11246482.h

iOS应用软件沙盒sandbox相关知识(原创)

获取应用软件沙盒sandbox方法: 通过在iOS程序viewDidLoad中打印NSString *path = NSHomeDirectory(); 然后在Finder中前往该打印出的路径,即可看到该程序的沙盒sandbox. 例如:/Users/wujia121/Library/Developer/CoreSimulator/Devices/3FDEE527-D4DB-492F-9490-1D04AF9559A8/data/Containers/Data/Application/82A19