首页 CSS

CSS

  • 关于CSS中定位的小结

    关于CSS中定位的小结

    CSS中定位有四种在不同的场景下有不同的作用下面我就大体的介绍一下这四种定位. static静态定位:应用的场景不多,这里不做介绍 下面主要介绍一下其他三种常见的定位 1.position:relative相对定位:顾名思义,相对定位就是相对于原来自己的位置做出对应的变化, 需要注意的是 :元素移动后会占有原来的位置(这是relative定位最为重要的一点) 下面为代码演示部分: <style> * { margin: 0;...

    CSS 2020-03-31 9 0
  • css区分ie8/ie9/ie10/ie11 chrome firefox的代码

    css区分ie8/ie9/ie10/ie11 chrome firefox的代码

    网站兼容性调试实在令人烦心,现在的网站设计人员真的要比以前费力很多,因为网页代码不再是只需满足一个IE6访问就行,而是要满足N多的浏览器访问正常才行。粗略算一下,目前至少要满足如下的浏览器要求:IE8、IE9、IE10、IE11、Chrome、Firefox,由于360使用的是Chrome内核,所以满足Chrome基本就满足了360。而IE家族真是一个版本一个样,我说IE怎么这么喜欢折腾呢?这给网页设计师带来多大的麻烦呀!今天,我就把这几个主要浏览器的CSS hack代码汇总一下。 例如现有CSS代码如下:...

    CSS 2020-03-31 10 0
  • css hack之\9和\0就可能对hack IE11\IE9\IE8无效

    css hack之\9和\0就可能对hack IE11\IE9\IE8无效

    每次设计一张网页或一个表单,都被各种浏览器的兼容问题伤透脑筋,尤其是IE家族。在做兼容性设计时,我们往往会使用各种浏览器能识别的独特语法进行hack,从而达到各种浏览器下显示正常的目的。其中,我们用得最多莫属于\9和\0了。\9和\0是hack IE8、IE9、IE11的独特标识。但是问题来了,\9和\0到底怎样hack IE8、IE9、IE11这三个浏览器?这个问题一直困扰我很久,不过,今天我终于搞明白了,也独创了一个能hack IE8、IE9、IE11这三个浏览器的代码写法模式,本文将与各位分享。 \9和\0...

    CSS 2020-03-31 11 0
  • css3 flex实现div内容水平垂直居中的几种方法

    css3 flex实现div内容水平垂直居中的几种方法

    一、flex-direction: (元素排列方向) ※ flex-direction:row (横向从左到右排列==左对齐) ※ flex-direction:row-reverse (与row 相反) ※ flex-direction:column (从上往下排列==顶对齐) ※ flex-direction:column-reverse (与column 相反) 二、flex-wrap: (内容一行容不下的时候才有效) ※flex-wrap:nowrap (超出不换行,很奇怪里面的...

    CSS 2020-03-30 13 0
  • 比较好看的css 自定义样式(标题 h1 h2 h3)

    比较好看的css 自定义样式(标题 h1 h2 h3)

    效果图 博客园中常用的样式 /*标题h1 h2 h3样式*/ #content { color: black; font: 0.875em/1.5em"微软雅黑", "PTSans", "Arial", sans-serif; font-size: 16px; } #content h1 { background: #2B6695; border-radius: 6px 6px 6px...

    CSS 2020-03-30 12 0
  • css之display属性之inline-block布局实现详解

    css之display属性之inline-block布局实现详解

    CSS display 属性 注释:如果规定了 !DOCTYPE,则 Internet Explorer 8 (以及更高版本)支持属性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、&...

    CSS 2020-03-30 8 0
  • CSS之定位布局(position,定位布局技巧)

    CSS之定位布局(position,定位布局技巧)

    1.什么是定位: css中的position属性,position有四个值:absolute/relative/fixed/static(绝对/相对/固定/静态(默认))通过定位属性可以设置一些不规则的布局,使用TLBR(top,left,bottom,right)来调整元素位置。 2.各个属性值的描述: static(静态)没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级,在普通流中,各个元素默认的属性。relative(相对定位)对象不可层叠、不脱离文档流,参考自身静态位置通过 to...

    CSS 2020-03-30 10 0
  • css记录文本图标对齐的几种解决方案

    css记录文本图标对齐的几种解决方案

    开发中遇见图片跟文字放在一行显示是最常见不过的了,两个行内元素的对齐通常也是最令人头疼,有时候明明使用了最常用的对齐方法,却总还是有些许偏差,先来看一个最基本的示例: html部分: <div class="wrap"> <img src="https://avatars3.githubusercontent.com/u/16339041?s=60&v=4" alt=""> xx测试对齐Sty...

    CSS 2020-03-30 9 0
  • css 层叠与z-index的示例代码

    css 层叠与z-index的示例代码

    层叠与层叠等级 HTML 元素是一个三维的概念,除了水平和垂直方向外,还会在“z 轴”上层层叠加。 既然是叠加,就会涉及到先后顺序的问题,规范中称之为“层叠等级”。 默认情况下,图文是网页的核心,因此内联元素的等级理应最高;然后是布局,其中浮动元素(脱离文档流)的等级高于块级元素;最低等级是设置背景、边框等装饰属性的元素。 例子: <style> .f { background-color: #ccffcc...

    CSS 2020-03-30 8 0
  • CSS 清除浮动与BFC的方法

    CSS 清除浮动与BFC的方法

    BFC BFC:块级格式化上下文 BFC的布局规则 内部的Box会在垂直方向,一个接一个地放置。 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。 计算BFC的高度时,浮动元素也参与计算。 BFC的区域不会与float box重叠。 每个盒子(块盒与行盒)的margin box的左边,与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。 BFC就是页...

    CSS 2020-03-30 8 0
  • ie中出现的jquery.form.js拒绝访问,input上传按钮必须主动点击的问题

    ie中出现的jquery.form.js拒绝访问,input上传按钮必须主动点击的问题

    下面先给大家看下代码 <form id="uploadFileForm2" name="uploadFileForm2" enctype="multipart/form-data" method="post"> <div class="upload-wapper mt20"> <input type="file" name=&qu...

    CSS 2020-03-30 9 0
  • 使用 CSS3 中@media 实现网页自适应的示例代码

    使用 CSS3 中@media 实现网页自适应的示例代码

    如今,电脑显示器的屏幕分辨率向越来越大发展,而手机等移动设备终端的分辨率却不可能大到哪里去。越来越多的网站,开始让自己的页面自适合各种分辨率,在小分辨率下显示基本的内容,在大分辨率下显示全部功能,甚至是分多等级的多版本。 一、CSS2 中的@media css2里面虽然支持@media属性,但是能实现的功能比较少,一般只用做打印的时候做特殊定义的CSS。 @media sMedia { sRules } 1.1、示例 // 设置显示器用字体尺寸 @media screen { BODY...

    CSS 2020-03-30 14 0
  • css高度塌陷问题的解决方案

    css高度塌陷问题的解决方案

    1. 高度塌陷 在文档流中,父元素的高度默认被子元素撑开,也就是说子元素多高,父元素就多高。但是, 当为子元素设置浮动后,子元素会完全脱离文档流。此时,将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷。 由于父元素的高度塌陷了,则父元素下的所有元素都会向上移动,这样将会导致页面布局混乱。 所以在开发中一定要避免出现高度塌陷的问题。 <!DOCTYPE html> <html lang="en"> <head>...

    CSS 2020-03-30 8 0
  • CSS实现隐藏滚动条并可以滚动内容效果(三种方式)

    CSS实现隐藏滚动条并可以滚动内容效果(三种方式)

    隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法。 方法1:计算滚动条宽度并隐藏起来 在本站的侧栏,你可以看到前端日报的那块内容并没有滚动条,但鼠标移上去却可以滚动内容。这是什么技术呢? 其实我只是把滚动条通过定位把它隐藏了起来。 演示 下面给一个简化版的代码· <div class="outer-container"...

    CSS 2020-03-30 10 0
  • CSS3 不定高宽垂直水平居中的几种方式

    CSS3 不定高宽垂直水平居中的几种方式

    1、flex布局 .father { display: flex; justify-content: center; align-items: center; } 这种方式兼容性不好 2、position + transform .son { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } IE9...

    CSS 2020-03-30 7 0
1 2 3 4 5 ››