TypechoJoeTheme

至尊技术网

统计
登录
用户名
密码
/
注册
用户名
邮箱
搜索到 6 篇与 CSS 的结果
2021-01-11

CSS弹性布局

CSS弹性布局
Flexbox 是 flexible box 的简称(注:意思是“灵活的盒子容器”),是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列,使它们能在不同的屏幕尺寸和设备下可预测地展现出来。它之所以被称为 Flexbox ,是因为它能够扩展和收缩 flex 容器内的元素,以最大限度地填充可用空间。与以前布局方式(如 table 布局和浮动元素内嵌块元素)相比,Flexbox 是一个更强大的方式:1、在不同方向排列元素2、重新排列元素的显示顺序3、更改元素的对齐方式4、动态地将元素装入容器容器属性flex-directionrow(默认值):主轴为水平方向,起点在左端。row-reverse:主轴为水平方向,起点在右端。column:主轴为垂直方向,起点在上沿。column-reverse:主轴为垂直方向,起点在下沿。flex-wrapnowrap(默认):不换行。wrap:换行,第一行在上方。wrap-reverse:换行,第一行在下方。justify-contentflex-start(默认值):左对齐flex-end:右对齐center: 居中space-betwe...
2021年01月11日
48 阅读
0 评论
2020-11-21

CSS样式重置表

CSS样式重置表
具体样式如下,可以直接整个复制在自己的reset.css中:html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; height: 100%; } body { margin: 0; font-size: 14px; font-family: "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif; line-height: 1.5; color: #333; background-color: #fff; min-height: 100%; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { ...
2020年11月21日
7 阅读
0 评论
2020-08-16

CSS选择器

CSS选择器
选择器例子例子描述CSS.class.intro选择 class="intro" 的所有元素。1#id#firstname选择 id="firstname" 的所有元素。1**选择所有元素。2elementp选择所有 <p> 元素。1element,elementdiv,p选择所有 <div> 元素和所有 <p> 元素。1element elementdiv p选择 <div> 元素内部的所有 <p> 元素。1element>elementdiv>p选择父元素为 <div> 元素的所有 <p> 元素。2element+elementdiv+p选择紧接在 <div> 元素之后的所有 <p> 元素。2[attribute][target]选择带有 target 属性所有元素。2[attribute=value][target=_blank]选择 target="_blank" 的所有元素。2[attribute~=value][title~=flower]选择 ti...
2020年08月16日
4 阅读
0 评论
2019-12-31

CSS里的float清除浮动引用方法

CSS里的float清除浮动引用方法
一、浮动产生原因一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了。本来两个黑色对象盒子是在红色盒子内,因为对两个黑色盒子使用了float浮动,所以两个黑色盒子产生了浮动,导致红色盒子不能撑开,这样浮动就产生了。简单地说,浮动是因为使用了float:left或float:right或两者都是有了而产生的浮动。二、浮动产生负作用1、背景不能显示由于浮动产生,如果对父级设置了(CSS background背景)CSS背景颜色或CSS背景图片,而父级不能被撑开,所以导致CSS背景不能显示。2、边框不能撑开如上图中,如果父级设置了CSS边框属性(css border),由于子级里使用了float属性,产生浮动,父级不能被撑开,导致边框不能随内容而被撑开。3、margin padding设置值不能正确显示由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。三、css解决浮动,清除浮动方法1、把这段代码添加的C...
2019年12月31日
6 阅读
0 评论
2019-09-06

CSS用@media媒体查询进行响应式设计,什么是媒体查询

CSS用@media媒体查询进行响应式设计,什么是媒体查询
随着互联网的发展,各种智能手机,平板这些移动设备随处可见。那如何让我们的网站在各种移动端设备上都能合理布局呢? 为每一个设备写一套代码麻烦且工作量大。那么聪明的程序员们会用一套代码,就能让网站在不同大小的设备上合理显示。因此,响应式设计模型就产生了,其核心就是“媒体查询”。一、什么是媒体查询媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color (等)。使用媒体查询,可以在不改变页面内容的情况下,为特定的一些输出设备定制显示效果。使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。二、@media 媒体查询的使用a.要在html文档中添加以下代码,用来兼容移动设备的显示效果<meta na...
2019年09月06日
5 阅读
0 评论